WEB前端第六十九课——viewport、rem单位

标签：ali   back   设计软件   第十周   无法   name   ble   默认   minimum   

1.viewport视口

　　视口（viewport），是视图窗口的简称。

　　视口的大小就是HTML元素的实际大小。

　　但是，在移动端要想展示实际页面大小则必须进行视口的适配设置，

　　否则，移动端加载页面时，默认视口宽度980px或某个值（布局视口宽度），无法呈现实际大小。

　　说明：

　　　　在桌面显示器上CSS中的1px相当于1个物理像素，但在移动屏幕上由于设备分辨率差异较大，

　　　　可能相同尺寸屏幕的分辨率（像素密度）相差1倍甚至更多，这时CSS中的1px对应的的物理像素

　　　　数量会因设备不同而不同，所以移动端浏览器必须进行viewport适配，才能得到理想的布局效果。

　　　　获取布局视口（layout viewport）宽度：

　　　　　　document.documentElement.clientWidth

2.视口适配

　　使用标签控制viewport进行适配设置，得到理想视口宽度（ideal viewport）。

　　元素可以提供关于HTML元素的元数据信息，比如页面描述、搜索关键字、访问频率等。

　　元素属性：

　　　　content，设置或返回元素的content属性的值；

　　　　name，将content属性连接到某个元数据的名称；

　　　　httpEquiv，将content属性连接到某个HTTP头部；

　　　　scheme，设置或返回用于解释content属性值的格式。

　　借助标签进行viewport设置时，name="viewport"，而 meta content的属性值包含以下6个：

　　　　width，设置布局视口（layout viewport）的宽度，值为正整数 或 device-width（设备屏幕宽度）

　　　　initial-scale，设置页面初始缩放值，值为“0.0-10.0”之间

　　　　minimum-scale，设置最小缩放比例，值为“0.0-10.0”之间，必须小于等于 maximum-scale

　　　　maximum-scale，设置最大缩放比例，值为“0.0-10.0”之间，必须大于等于 minimum-scale

　　　　height，设置布局视口的高度，值为正整数 或 device-height，一般不需要单独定义

　　　　user-scalable，设置是否允许用户进行缩放操作，值为 yes/no，默认为“yes”

　　语法示例：

　　注意：

　　　　通常，单独设置“initial-scale=1”或者“width=device-width”中的一个都可以得到 ideal viewport，

　　　　但是，仅设置“width=device-width”时，在iPhone或iPad上，无论横屏还是竖屏，ideal viewport

　　　　都是竖屏时的宽度，而仅设置“initial-scale=1”时，在window phone的IE浏览器上，idealviewport

　　　　始终是竖屏时的宽度，当两者同时设置时，浏览器会取二者的值较大的那一个。

3.REM单位

　　rem（font size of the root element）是相对于根元素的字体大小按比例进行计算的尺寸单位。

　　在响应式布局中，考虑到不同移动端的尺寸差异，为确保所有元素所占空间在不同设备上比例相同，

　　页面布局需要动态调整，则通过REM对设备的物理像素和逻辑像素进行动态转换达到布局适配目的。

　　按照REM思想定义根元素字体大小时，语法如下：

　　　　document.documentElement.style.fontSize

　　　　=(document.documentElement.clientWidth/750)*100+"px";

　　　　说明：

　　　　　　⑴上述设置表示将设备宽度进行750等分，再乘以100，得到根元素字体的像素大小。

　　　　　　　所以，在不同尺寸的设备上，根元素字体的大小也就不同，但与设备尺寸的比例是相同的。

　　　　　　⑵由于大多数PS设计稿是以iPhone6为标准进行设计的，iPhone6的逻辑像素是375px，而

　　　　　　　它的实际物理像素是满屏宽度的2倍，也就是750px，PS设计软件的分辨率和物理像素是

　　　　　　　是1:1的比例，所以为了便于不同设备间按比例缩放转换，将设备宽度进行750等分。

　　　　　　⑶为了避免使用rem单位设置元素大小时小于浏览器默认最小尺寸，如12px、14px等，

　　　　　　　所以将设备宽度750等分后，乘以一个放大系数，使用“100”则是为了方便计算。

　　代码示例：

4.响应式表格案例

　　知识碎片：

　　　　window.onresize事件，视口尺寸发生变化时触发

　　　　border-collapse属性，设置相邻单元格边框是否合并

　　　　cellspacing属性，设置单元格之间的距离

　　　　letter-spacing属性，设置字符之间的距离

　　　　word-spacing属性，设置字体之间的距离

　　测试结果：

WEB前端第六十九课——viewport、rem单位

标签：ali   back   设计软件   第十周   无法   name   ble   默认   minimum   

原文地址：https://www.cnblogs.com/husa/p/14704158.html