viewport 详解
liujsim opened this issue · comments
通过示例详细解释 vieport 细节
测试环境:通过 chrome 浏览器模拟 iPhone 6 ,支持 sass 的项目
预备知识:
iPhone 6 物理分辨率 750*1334
, CSS 分辨率 375*667
window.devicePixelRatio : 设备的物理像素分辨率与CSS像素分辨率的比值
document.body.clientWidth :网页可见区域的宽度
两个 viewport
第一步: 不加 meta:vp 标签,直接将 pc 版在手机上显示,根据结果可知,页面渲染在一个 980px(iOS) 的 layer viewport
clientWidth = 980, devicePixelRatio = 2
原理:为了排版正确,虚拟一个 layout viewport,先排版正确,然后缩放
layout viewport 渲染页面,visual viewport 进行窗口缩放 scale
第二步:添加 meta 标签
<meta name="viewport" content="width=device-width, initial-scale=1.0">
将 layout viewport 的宽度等于设备宽度
width=device-width
initial-scale=1.0
不缩放,按照 ideal viewport 显示,可以修改值,观察网页的显示效果
假定: ideal viewport 为每个设备最佳显示尺寸(iPhone 6 正是 375*667
)
demo
clientWidth = 375, devicePixelRatio = 2
移动多终端布局适配
vw 和 vh 布局
使用 vw 和 vh
vw=view width(视口宽度)
vh=view height(视口高度)
vw: 1vw = 视口宽度的1%
vh: 1vh = 视口高度的1%
vmin 选取vw和vh中最小的那个
vmax 选取vw和vh中最大的那个
缺点:无法避免默认100%宽度的 block 元素跟随 body 而过大过小
rem 布局
rem布局就是指为文档的根节点<html>
元素设置一个基准字体大小,然后所有的元素尺寸都以rem为单位来写
onload和onpageshow的区别:当页面是从缓存中读取的,onload就不执行,而onpageshow仍然执行;