内容简介:通常我们在pc上看到的页面都是比较大的,在pc上访问页面是正常显示的,默认是不会被缩放的,除非是手动进行了缩放,页面才会被放大比例或者是缩小比例显示。但是在移动端是不一样的,如果将一个pc端的页面放到手机端进行访问,那么可能出现页面挤到一起、布局错乱或者出现横向滚动条的情况,我们给用户带来不好的体验。还有在屏幕尺寸大小不同的手机上进行访问页面时,页面显示的效果不能合理的展示,我们期望的是在手机屏幕较大时显示的内容比较大一些,手机屏幕小的时候页面的内容也会缩小进行自适应。因此,移动端适配的目的是在不同尺寸的
通常我们在pc上看到的页面都是比较大的,在pc上访问页面是正常显示的,默认是不会被缩放的,除非是手动进行了缩放,页面才会被放大比例或者是缩小比例显示。但是在移动端是不一样的,如果将一个pc端的页面放到手机端进行访问,那么可能出现页面挤到一起、布局错乱或者出现横向滚动条的情况,我们给用户带来不好的体验。还有在屏幕尺寸大小不同的手机上进行访问页面时,页面显示的效果不能合理的展示,我们期望的是在手机屏幕较大时显示的内容比较大一些,手机屏幕小的时候页面的内容也会缩小进行自适应。
因此,移动端适配的目的是在不同尺寸的设备上,页面达到合理的展示(自适应)或者说是能够保持统一效果。
二、viewport的基本概念
1.通常viewport是指视窗、视口,浏览器上(也可能是一个app中的webview)用来显示网页的那部分区域。在移动端和pc端视口是不同的,pc端的视口是浏览器窗口区域,而在移动端有三个不同的视口概念:布局视口、视觉视口、理想视口
-
布局视口:在浏览器窗口css的布局区域,布局视口的宽度限制css布局的宽。为了能在移动设备上正常显示那些为pc端浏览器设计的网站,移动设备上的浏览器都会把自己默认的viewport设为980px或其他值,一般都比移动端浏览器可视区域大很多,所以就会出现浏览器出现横向滚动条的情况
-
视觉视口:用户通过屏幕看到的页面区域,通过缩放查看显示内容的区域,在移动端缩放不会改变布局视口的宽度,当缩小的时候,屏幕覆盖的css像素变多,视觉视口变大,当放大的时候,屏幕覆盖的css像素变少,视觉视口变小。
-
理想视口:一般来讲,这个视口其实不是真是存在的,它对设备来说是一个最理想布局视口尺寸,在用户不进行手动缩放的情况下,可以将页面理想地展示。那么所谓的理想宽度就是浏览器(屏幕)的宽度了。
为了理解起来更清楚一点,在网上找了两张比较易懂的图片。如果对这三个视口的概念还不是很清楚,看看下面几张图可能就会一目了然:
布局视口
视觉视口
2.那么如何设置理想视口呢?很简单,只需要在html的header中加入一段很重要的代码
<meta name="viewport"content="width=device-width,user-scalable=no,initial-scale=1.0, maximum-scale=1.0,minimum-scale=1.0"> 复制代码
这行代码大家应该都不陌生,或者说是知道加了这行代码,然后页面的宽度就会跟我的设备宽度一致。,实际上,它就是设置了理想视口,将布局视口的宽度设置成了理想视口(浏览器/设备屏幕的宽度)。
上面说到的视口宽度等均是css像素,所以需要简单了解一下几个基本的概念:
-
css像素:代码中使用的逻辑像素,衡量页面上的内容大小
-
设备像素:即物理像素,控制设备显示的单位,与设备、硬件有关
-
设备独立像素:与设备无关的逻辑像素,不同于设备像素(物理像素),不是真实存在的。
-
设备像素比:定义设备像素与设备独立像素比的关系window.devicePixelRatio)设备像素比=物理像素/设备独立像素
-
分辨率:指的是屏幕上垂直和水平的总物理像素
3.在meta标签中,除了viewport这个很重要的属性,用来设置视口的一些行为,还有几个与其搭配一起使用的属性:
属性 | 含义 | 取值 |
---|---|---|
width | 定义视口的宽度,单位为像素 | 正整数或设备宽度device-width |
height | 定义视口的高度,单位为像素 | 正整数或device-height |
initial-scale | 定义初始缩放值 | 整数或小数 |
minimum-scale | 定义缩小最小比例,它必须小于或等于maximum-scale设置 | 整数或小数 |
maximum-scale | 定义放大最大比例,它必须大于或等于minimum-scale设置 | 整数或小数 |
user-scalable | 定义是否允许用户手动缩放页面,默认值yes | yes/no |
三、适配的几种方案:
(1)css3 媒体查询:通过媒体查询的方式,编写适应不同分辨率设备的的css样式
@media screen and (max-width: 320px){ ....适配iphone4的css样式 } @media screen and (max-width: 375px){ ....适配iphone6/7/8的css样式 } @media screen and (max-width: 414px){ ....适配iphone6/7/8 plus的css样式 } ...... 复制代码
优点:
-
方法简单,只需修改css文件
-
调整屏幕宽度时不用刷新页面就可以响应页面布局
缺点:
-
代码量大,不方便维护
-
不能够完全适配所有的屏幕尺寸,需要编写多套css样式
(2)百分比布局方案:给元素设置百分比,例如2个div想占满宽度100%,那么一个div设置宽度为50%,这样不固定宽度,使得在不同的分辨率下都能达到适配
那么需要清楚一个问题,各个子元素或属性的百分比是根据谁来设定呢?
- 子元素width、height的百分比:子元素的width或height中使用百分比,是相对于子元素的直接父元素
- margin和padding的百分比:在垂直方向和水平方向都是相对于直接父亲元素的width,而与父元素的height无关
- border-radius的百分比:border-radius的百分比是相对于自身宽度,与父元素无关
优点:
- 宽度自适应,在不同的分辨率下都能达到适配
缺点:
- 百分比的值不好计算
- 需要确定父级的大小,因为要根据父级的大小进行计算
- 各个属性中如果使用百分比,相对父元素的属性并不是唯一的
- 高度不好设置,一般需要固定高度
(3)rem方案:
- rem单位:rem是一个只相对于浏览器的根元素(HTML元素)的font-size的来确定的单位。默认情况下,html元素的font-size为12px
- 通过rem来实现适配:rem单位都是相对于根元素html的font-size来决定大小的,根元素的font-size相当于提供了一个基准,当页面的宽度发生变化时,只需要改变font-size的值,那么以rem为固定单位的元素的大小也会发生响应的变化。需要先动态设置html根元素的font-size,再计算出其他页面元素以rem为固定单位的值
控制font-size的js代码
<script type="text/javascript"> (function() { var deviceWidth = document.documentElement.clientWidth; deviceWidth = deviceWidth < 320 ? 320 : deviceWidth > 640 ? 640 : deviceWidth; document.documentElement.style.fontSize = deviceWidth / 7.5 + 'px'; })(); </script> 复制代码
上面的js代码中deviceWidth/7.5,表示font-size用deviceWidth/7.5的值来表示,1rem的值就是deviceWidth/7.5,当视口容器发生变化时就可以动态设置font-size的大小,不论页面宽度变大还是缩小,视口宽度都会被等分为7.5份,每一份就是1rem,从而1rem在不同的视觉容器中表示不同的大小,但在视口总宽度中的占比是不变的,实现了等比适配。
这个7.5在这里并不是一个固定的值,也可以设置为其他值,因为设计稿一般是根据iphone6/7/8的宽度来设计,一般为375或者750,所以为了方便计算,在这里取7.5,能够被整除方便后面的计算。
元素的rem值计算
.div{ display: flex; align-items: center; justify-content: center; width: 2rem; height: 0.96rem; background:#aaa; font-size: 0.24rem; } 复制代码
假定一个div的宽度为100px,那么在计算时,根据设置的1rem = 50px,所以100px=2rem,其他所有的属性值都可以类似这样计算。font-size一般情况下还是使用px,因为在rem中,只要使用了rem单位都会被转换,那么在转换的时候,会出现不能被整除或者出现小数的情况比如10.333333px,那么在显示时就可能出现一些偏差。而且如果期望在小屏幕下面显示跟大屏幕同等量的字体,但是由于rem的等比缩放,在小屏幕下就会存在小屏幕字体更小的情况,所以对于字体的适配更好的做法就是使用px和媒体查询来进行适配。
优点:
- rem单位是根据根元素font-size决定大小,只要改变font-size的值,以rem为固定单位的元素大小也会发生响应式的改变
缺点:
- 必须通过一段js代码控制font-size的大小
- 控制font-size的js代码必须放在在页面第一次加载完成之前,并且放在引入的css样式代码之前。
(4)vw、vh方案 css3中引入与视口有关的新的单位vw和vh,vw表示相对于视口的宽度,vh表示相对于视口高度
单位 | 含义 |
---|---|
vw | 相对于视口的宽度,视口宽度是100vw |
vh | 相对于视口的高度,视口宽度是100vh |
vmin | vw和vh中较小的值 |
vmax | vw和vh中较大的值 |
vw单位换算: 视口宽度为100vw占满整个视口区域,那么1vw相当于占整个视口宽度的1%,所以1px= 1/375*100 vw 所有的页面元素都可以直接进行计算换算成vw单位,但是这样计算和百分比方案计算比较类似,都会比较麻烦。
但是有一个比较厉害的插件—— postcss-px-to-viewport,可以预处理css,将px单位转换为vw单位,但是需要进行一些相关的webpack配置
{ loader: 'postcss-loader', options: { plugins: ()=>[ require('autoprefixer')({ browsers: ['last 5 versions'] }), require('postcss-px-to-viewport')({ viewportWidth: 375, viewportHeight: 1334, unitPrecision: 3, viewportUnit: 'vw', selectorBlackList: ['.ignore', '.hairlines'], minPixelValue: 1, mediaQuery: false }) ] } 复制代码
接下来是对postcss-px-to-viewport配置中的属性的介绍:
单位 | 含义 |
---|---|
viewportWidth | 视口宽度(数字) |
viewportHeight | 视口高度(数字) |
unitPrecision | 设置的保留小数位数(数字) |
viewportUnit | 设置要转换的单位(字符串) |
selectorBlackList | 不需要进行转换的类名(数组) |
minPixelValue | 设置要替换的最小像素值(数字) |
mediaQuery | 允许在媒体查询中转换px(true/false) |
优点:
- 指定vw\vh相对与视口的宽高,由px换算单位成vw单位比较简单
- 通过postcss-px-to-viewport插件进行单位转换比较方便
缺点:
-
直接进行单位换算时百分比可能出现小数,计算不方便
-
兼容性- 大多数浏览器都支持、ie11不支持 少数低版本手机系统 ios8、android4.4以下不支持
最后,有一个问题,既然百分比和vw都是需要计算百分比,那么两个方案的不同之处?
单位 | 含义 |
---|---|
% | width、height等大部分相对于直接父元素、border-radius、translate、background-size等相对于自身 |
vw | 只相对于视口宽度 |
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持 码农网
猜你喜欢:本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们。
Weaving the Web
Tim Berners-Lee / Harper Paperbacks / 2000-11-01 / USD 15.00
Named one of the greatest minds of the 20th century by Time , Tim Berners-Lee is responsible for one of that century's most important advancements: the world wide web. Now, this low-profile genius-wh......一起来看看 《Weaving the Web》 这本书的介绍吧!