## 目录
1. 如何判断网页类型:固定宽高/固定宽自适应高/自适应宽固定高/自适应宽高/响应式宽高
2. 常见自适应方式,单位
3. 具体项目考量/要求
### 网页类型
**自适应设计(Adaptive design)**
是为不同类别的设备建立不同的网页,检测到设备分辨率大小后调用相应的网页。
**响应式设计(Responsive design)**
是一套界面同时运行到pc端、平板、手机端各个不同的视口。通过检测设备的分辨率,来对页面做出不同的布局和内容。
**其他类型**
固定宽高等其他类型直接px写好就可以
### 常见自适应方式,单位
**单位**
[参考地址](https://developer.mozilla.org/zh-CN/docs/Learn/CSS/Building_blocks/Values_and_units)
1. 绝对长度:cm/mm/Q/in/pc/pt/px
2. 相对长度:em/ex/ch/rem/lh/vw/vh/vmin/vmax
**自适应方式**
[Flexible实现手淘H5页面的终端适配](https://github.com/amfe/article/issues/17)
[rem布局原理深度理解](https://www.cnblogs.com/leaf930814/p/9059340.html)
[基于vw等viewport视区单位配合rem响应式排版和布局](https://www.zhangxinxu.com/wordpress/2016/08/vw-viewport-responsive-layout-typography/)
+ 常见的实现方案
1. 以百分比为单位,整个浏览器1/100为基础单位
2. 以vh/vw为单位,可视区域1/100为基础单位
3. 以rem为单位,计算html字体方式又有两种:js/css calc,rem是参照页面计算,一般js计算时将页面分为10份
+ 最终实现方案
1. 以rem为基础单位
2. 用js计算出每个页面对应的html基数字体大小
3. css calc 计算body在不同屏幕大小时显示的字体大小
4. 为什么不直接用calc计算出的字体大小来布局,重要的原因是初始大小的变化需要计算不同rem值,整个屏幕不是分成10份,相对来说麻烦,但是并不影响使用
5. 不要用vh做任何设定,高度的变化不可控制
+ 一个小插件
1. px2rem:将px转换成rem的插件,vs code/sublime text
### 基于rem和vw和calc最佳计算代码
“`
html {
font-size: 16px;
}
@media screen and (min-width: 375px) {
html {
/* iPhone6的375px尺寸作为16px基准,414px正好18px大小, 600 20px */
font-size: calc(100% + 2 * (100vw – 375px) / 39);
font-size: calc(16px + 2 * (100vw – 375px) / 39);
}
}
@media screen and (min-width: 414px) {
html {
/* 414px-1000px每100像素宽字体增加1px(18px-22px) */
font-size: calc(112.5% + 4 * (100vw – 414px) / 586);
font-size: calc(18px + 4 * (100vw – 414px) / 586);
}
}
@media screen and (min-width: 600px) {
html {
/* 600px-1000px每100像素宽字体增加1px(20px-24px) */
font-size: calc(125% + 4 * (100vw – 600px) / 400);
font-size: calc(20px + 4 * (100vw – 600px) / 400);
}
}
@media screen and (min-width: 1000px) {
html {
/* 1000px往后是每100像素0.5px增加 */
font-size: calc(137.5% + 6 * (100vw – 1000px) / 1000);
font-size: calc(22px + 6 * (100vw – 1000px) / 1000);
}
}
“`
### 自动计算html字号为屏幕宽度1/10的js
“`
function htmlFz(){
var dpr, rem, f;
var docEl = document.documentElement;
var f = document.querySelector(‘html’);
rem = docEl.clientWidth > 750 ? 75 : (docEl.clientWidth / 10);
window.onresize = function(){htmlFz();};
f.style.fontSize = rem + ‘px’;
}
htmlFz();
“`