search

liujsim / blog

blog
https://github.com/liujsim/blog/issues
MIT License
1 stars 0 forks source link

viewport 详解 #6

Open liujsim opened 6 years ago

liujsim commented 6 years ago

通过示例详细解释 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

参考 (翻译)第三种viewport-ideal viewport

liujsim commented 6 years ago

移动多终端布局适配

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为单位来写

liujsim commented 6 years ago

同时使用 rem + vw|vh

首先确定 html 元素的 font-size ，以 vw 为单位，其他子元素以 rem 为单位

推荐利用视口单位实现适配布局

liujsim commented 6 years ago

onload和onpageshow的区别：当页面是从缓存中读取的，onload就不执行，而onpageshow仍然执行;