自适应,视口单位_视口宽度1/10是什么单位-程序员宅基地

技术标签: 移动端适配  自适应  

目前就我了解的自适应两种方式:

  1. 在移动端中利用rem的相对于根HTML进行改变,通过一段JS实现了移动端自适应
  2. 使用纯CSS视口单位来自行自适应

纯CSS3使用vw和vh视口单位实现自适应
像素与浏览器视口的细节
使用VH和VW实现真正的流体排版
谈谈rem与vw — rem

“自适应布局”,它又叫做响应式布局,主要是针对页面在不同的设备,不同的屏幕大小,不同的分辨率下对页面布局的自动适应,我的理解就是等比例缩放(任何设备或者窗口任意改变的情况下)。

响应式布局的实现依靠***媒体查询***( Media Queries )来实现
@media 可以针对不同的屏幕尺寸设置不同的样式

通过 rem 单位来实现适配,内嵌一段脚本去动态计算根元素大小。这样比较麻烦,就需要新的办法去真正地适配所有设备尺寸。

通常用的相对字体单位(注* 如px, pt, em)只是相对于HTML根元素的大小而自动改变,而不是相对于用户的屏幕。于是引入了视口单位

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/fengtingYan/article/details/82905101

智能推荐

Java中接口的深入解析_java解析接口信息-程序员宅基地

文章浏览阅读847次,点赞19次,收藏23次。在Java中,接口是一种特殊的引用类型,它定义了一组方法规范,但不实现这些方法(除了默认方法和静态方法)。接口是一种纯粹的抽象规范,没有状态(字段都是的)。_java解析接口信息

ffmpeg概述-程序员宅基地

文章浏览阅读585次。关于笔者编译SDL不能使用的问题,具体原因笔者也未知,但从ldd查看相关联的库来看,通过命令安装的SDL,会链接到许多相关的库上,而笔者编译出来的库则缺少了很多链接。所以这里不推荐自行编译SDL,如果你发现自行编译的用了出现一些问题,比如打不开播放,比如莫名其妙的崩溃之类的,请卸载自行编译的SDL,安装前面apt的SDL。如果你的/usr/local/lib路径没有加入到动态库路径,请先执行下面的指令,增加到系统环境中去。关于x264的安装比较简单,下载源码,切入到源码目录。

JDK的下载、安装和卸载教程-程序员宅基地

文章浏览阅读96次。  学习JAVA,必须得安装一下JDK(java development kit java开发工具包),配置一下环境就可以学习JAVA了,下面是下载和安装JDK的教程:  1.JDK下载地址:  http://www.oracle.com/technetwork/java/javase/downloads/...

Get一个全新的网盘工具5T的OneDrive(如何领取免费的5T空间的OneDrive和Office)_onedrive免费领取-程序员宅基地

文章浏览阅读2.6w次,点赞90次,收藏35次。这里并没有什么破解盗版一说,完全是官网的活动,限时领取,不知道什么时候就不能用了,如果看到了就快领取试试吧,毕竟5T的空间比某盘要好用很多,还带Office全家桶通过其他工具下载某盘文件(无需下载某盘客户端)注册活动账号领取福利获取OneDriveOffice安装注册活动账号领取福利第一步,打开活动网站往下滑输入姓氏,名字,以及你想要的邮箱前缀,输入后点击人机验证,验证成功点击SIGN UP然后点击CONFIRM然后就是申请成功了,您的账号和默认的密码,点击SIGN IN进去._onedrive免费领取

nmap 查看服务器版本信息,nmap命令-nmap命令扫描服务器信息的格式-程序员宅基地

文章浏览阅读3.1k次。用这条命令就可以扫描出目标网络的操作系统和开放端口号nmap-O...0/24上面的扫描信息直接输出到终端,如果想把结果写到文件里,可以用-oN,-oX选项输出到文本文件或xml文件。nmap-O...0/24-oXnmap_info.xml,结果会输出到XML文件:nmap_info.xml。nmap-O...0/24-oNnmap_info.nmap,结果会输出到普通文件:nmap_info...._nmap 查看系统版本

我说我不会Mybatis-Plus,他说你看这一篇试试-程序员宅基地

文章浏览阅读449次。在相同的Mapper接口中,可以定义自己的方法,并在对应的XML文件中为这些方法提供SQL语句或Mybatis查询逻辑。

随便推点

j2ee课程设计—基于activiti的请休假系统-程序员宅基地

文章浏览阅读740次。前言课设基于SSM框架,数据库采用mysql,主要业务交给activiti,版本控制利用github。参考资料:Intellij 部署SSM框架Activiti就是这么简单方大师的教材下文斜体部分均为Activiti就是这么简单中小标题。演示地址项目源码activiti学习小记基于0中Activiti就是这么简单,做些笔记。当前环境:按照Intellij 部署SSM框架中..._基于activiti的学生请假管理系统

城市建筑类毕业论文文献都有哪些?_城市空间文献有哪些-程序员宅基地

文章浏览阅读204次。本文是为大家整理的城市建筑主题相关的10篇毕业论文文献,包括5篇期刊论文和5篇学位论文,为城市建筑选题相关人员撰写毕业论文提供参考。_城市空间文献有哪些

会声会影软件2023破解版最新激活序列号_会声会影2023-程序员宅基地

文章浏览阅读3.3k次。会声会影2023简单易用,具有拖放式标题、转场、覆叠和滤镜,色彩分级、动态分屏视频和新增强的遮罩创建器,超越基本编辑,实现影院级效果。优化分屏剪辑功能,简化多时间轴编辑的工作流程,让创作更轻松。添加趣味性3D标题,内置NewBlueFX和proDAD转场和防抖插件,一键防抖和校准色彩。使用MultiCam Capture Lite可以轻松录制并编辑视频教程、产品演示、游戏视频、在线课程。会声会影2023的智能工具,使用AI面部识别对效果最好的照片和视频片段进行分析,提取,并编译到可以项目中,将我们的精彩时刻_会声会影2023

Spring Boot 中的异步调用_springboot异步调用-程序员宅基地

文章浏览阅读1w次,点赞9次,收藏53次。Spring Boot 中的异步调用通常我们开发的程序都是同步调用的,即程序按照代码的顺序一行一行的逐步往下执行,每一行代码都必须等待上一行代码执行完毕才能开始执行。而异步编程则没有这个限制,代码的调用不再是阻塞的。所以在一些情景下,通过异步编程可以提高效率,提升接口的吞吐量。这节将介绍如何在Spring Boot中进行异步编程。要开启异步支持,首先得在Spring Boot入口类上加上@EnableAsync注解:@SpringBootApplication@EnableAsyncpublic _springboot异步调用

VK1668 SSOP24兼用TM1668的LED数码驱动芯片_sm1668led驱动芯片与tm1668芯片可通用?-程序员宅基地

文章浏览阅读1.6k次。概述VK1668 是 1/5~1/8 占空比的 LED 显示控制驱动电路。由 10 根段输出、4 根栅输出、3 根段/栅输出,1 个显示存储器、控制电路、键扫描电路组成了一个高可靠性的单片机外围 LED 驱动电路。串行数据通过4线串行接口输入到 VK1668采用 SOP24 的封装形式。功能特点1.CMOS 工艺2. 低功耗3.多种显示模式:设置选择段和位的个数(4~7 位,10~1..._sm1668led驱动芯片与tm1668芯片可通用?

com wechat.class.php,wechat-php-sdk/wechat.class.php at master · l953422179/wechat-php-sdk · GitHub...-程序员宅基地

文章浏览阅读127次。/***微信公众平台PHP-SDK, 官方API部分* @author dodge * @link https://github.com/dodgepudding/wechat-php-sdk* @version 1.1* usage:* $options = array(*'token'=>'tokenaccesskey' //填写你设定的key*);* $weObj = n..._public static function message($msg='',$link=''){ $datatype = ifilter::a

推荐文章

热门文章

相关标签