viewport
-
概念
viewport是用户网页的可视区域,又叫做‘视区’。
比如我们有时使用移动设备访问pc端页面的时候会看到一个横向的滚动条,这里的可显示区域的宽度就是viewport的宽度。
-
属性
- width: 控制 viewport 的大小,比如 device-width 为设备的宽度(单位为缩放为 100% 时的 CSS 的像素)。
- initial-scale: 初始(页面第一次load)缩放比例
- user-scalable: 是否允许手动缩放
-
典型配置
<meta name="viewport" content="width=device-width,user-scalable=no,initial-scale=1,maximum-scale=1,minimum-scale=1,viewport-fit=cover" />
其含义就是将视口设置为 css像素 = 设备像素,即我们在页面中设置的1个CSS像素大小就等于1个设备像素大小。
viewport-fit=cover结局iphoneX的“刘海”问题。(最后补充有像素的几个概念)
VW方案
比如:设计稿 750px; 100vw = 750px; 1vw = 7.5px;把视觉稿的px用vw解决。
将px单位转换成vw单位的方法,使用 postcss-px-to-viewport
基本配置:
{
viewportWidth: 750, // 视口宽度
viewportHeight: 1334, // 视口高度
unitPrecision: 5, // 保留位数
viewportUnit: 'vw', // 希望使用的视口单位
selectorBlackList: ['.ignore', '.hairlines'], // 需要忽略的CSS选择器,保留原本单位,不会转为视口单位
minPixelValue: 1, // 设置最小的转换数值为1,只有大于1的值会被转换
mediaQuery: false // 媒体查询里的单位不需要转换单位
}
更多配置参考:https://github.com/evrone/postcss-px-to-viewport/blob/master/README_CN.md
解决元素容器宽高比问题:postcss-aspect-ratio-mini
解决1px的问题:postcss-write-svg
iPhone X 适配:
- meta标签
viweport-fit
属性,让页面内容完全覆盖整个窗口 - “刘海儿” 和 底部小黑条遮挡问题,在CSS中配置
constant(safe-area-inset-*)
以及env(safe-area-inset-bottom)
rem
-
概念
使用rem单位的元素会根据不同屏幕设定好的根元素的font-size自动显示相应的尺寸。
-
rem的计算
const oHtml = document.getElementsByTagName('html')[0] const width = oHtml.clientWidth; // 320px的屏幕基准像素为12px oHtml.style.fontSize = 12 * (width / 320) + "px";
使用JS来获取屏幕宽度的好处在于可以100%适配所有的机型宽度,既然是JS代码,为了避免造成因为动态设置元素的font-size而造成页面抖动,一般这部分代码我们放在header底部去加载,并内联到html文档里面。
-
如何将视觉稿中的px转换成
rem
比如视觉稿是以750px进行设计的:
flexible将视觉稿分成了
100
份,每份被称为a
,同时1rem
被认为是是10a
,我们可以计算出:1a = 7.5px; 1rem = 75px; // 根标签对应的font-size值就是75px;
媒体查询
-
概念
根据不同的屏幕编写不同的代码。
-
缺点
无法实现100%兼容,区间内无法进行区分。额外的代码工作量等。 -
例子
@media screen and (min-width: 375px){ html { font-size: 14.0625px; } } @media screen and (min-width: 360px){ html { font-size: 13.5px; } } @media screen and (min-width: 320px){ html { font-size: 12px; } } html { font-size: 16px; }
小结:文本px、图片百分比、宽高间距等rem,再加flex布局。还可以参考成熟的flexible.js(https://www.jianshu.com/p/04efb4a1d2f8)
一个简单易用的库 FastClick
它消除了移动端浏览器上的物理点击和触发一个 click 事件之间的 300ms 的延迟。
介绍:https://www.awesomes.cn/repo/ftlabs/fastclick
安装使用:https://www.npmjs.com/package/fastclick
<script src="//path/fastclick/1.0.6/fastclick.js"></script>
if ('addEventListener' in document) {
document.addEventListener('DOMContentLoaded', function() {
FastClick.attach(document.body);
}, false);
}
了解移动单位
单位 | 特点 |
---|---|
rem | 以根元素字体大小为基准 |
em | 以父元素字体大小为基准 |
了解像素
-
概念
-
css像素(Pixel): 代码中使用到的逻辑像素,实际并不存在的。
-
设备独立像素(Device Independent Pixel): 可以通过程序控制使用的虚拟像素,是一个总体概念,包括了CSS像素。
-
设备像素(Device Pixel): 设备能控制显示的最小单位,也就是物理像素,我们通常说的1920×1080像素分辨率就是用的设备像素单位
-
dpr(device pixel ratio): 设备像素比,即:dpr = dp/dpi
查看dpr大小:window.devicePixelRatio
-
ppi(pixel per inch): 每英寸所包含的像素点数目,数值越高,说明屏幕能以更高密度显示图像。
120-160之间的手机被归为低密度手机 160-240被归为中密度 240-320被归为高密度 320以上被归为超高密度(例如苹果公司的Retina显示屏)
-
-
关系
-
pc端 —— 在正常未缩放的情况下,一个dip等于一个dp,如果缩放200%,则一个dip等于两个dp。
-
移动端 —— 在标准屏幕(160ppi)下,一个dip等于一个dp。
-
-
说说使用
-
在非标准屏幕上以同样的大小显示一张图片
图片缩放大小(dp) = 图片css大小(dip) * dpr
-
-
重点掌握
移动端页面开发时我们通常配置元信息`<meta name="viewport" content="width=device-width" />`, 其含义就是将视口设置为 css像素 = 设备像素,即我们在页面中设置的1个CSS像素大小就等价于1个设备像素大小。