- 首页 > it技术 > >
- 了解viewport视口
- 移动端viewport视口就是浏览器显示页面内容的屏幕区域
- viewport视口包括布局视口（layout viewport）、视觉视口（visual viewport）、理想视口（ideal viewport）
- 布局视口（layout viewport）：布局视口与移动端浏览器屏幕宽度独立开，CSS布局根据布局视口进行计算视口大小，并被它约束；移动端布局视口默认宽度为980px，在移动端看PC端网页时内容很小，需要进行手动缩放查看
- 视觉视口（visual viewport）：视觉视口指用户看到的区域，用户可对视口进行缩放操作，且不影响布局视口
- 理想视口（ideal viewport）：布局视口默认值并不是一个理想宽度，所有浏览器厂商引入了理想视口概念，对于设备拥有一个最理想的布局视口宽度，无需用户手动缩放操作网页查看，利用
- 设置视口
- content内属性值：
- 视口宽度：width="正整数或device-width”
- 视口高度：height=“正整数或device-height“
- 初始缩放值：initial-scale=1.0
- 最小缩放值：minimum-scale=1.0
- 最大缩放值：maximum-scale=1.0
- 用户缩放操作权限：user-scalable=no
- 移动端适配方案
- 百分比（流式）布局： 将盒模型宽度设置为百分比，使盒模型宽度进行自动适应屏幕宽度，不受像素单位的约束，内容向两侧填充
优点：大屏显示内容更多
缺点：宽屏下比例失调
- rem布局：em单位和rem单位是相对单位，1em是相对于当前元素或父元素的font-size值，而1rem是相对于根元素（html元素）的font-size值
- 【CSS样式——移动端适配】设置根元素的动态的font-size值
// iPhone 6 为例进行计算：100 px / 375px * 100
html {
font-size: 26.67vw;
}
body {
/*设置回默认16px字体大小
font-size: 0.16rem;
}
推荐阅读
