响应式布局

}

-webkit-text-size-adjust:none

设定文字大小是否根据设备(浏览器)来自动调整显示大小

percentage：字体显示的大小；

auto：默认，字体大小会根据设备/浏览器来自动调整；

none:字体大小不会自动调整

响应式布局

响应式布局原理和方案

页面的设计和开发根据用户行为和设备环境进行调整和响应

Content is like water

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no”>

1. width=device-width: 自适应手机屏幕的尺寸宽度
2. maximum-scale:缩放比例的最大值
3. inital-scale:缩放的初始化
4. user-scalable:用户可以缩放

实现响应式布局的方式

1. 媒体查询
2. 百分比
3. vw/vh
4. rem

响应式设计实现通常会从以下几方面思考：

1. 弹性盒子和媒体查询等
2. 百分比布局创建流式布局的弹性UI，同时使用媒体查询限制元素的尺寸和内容变更范围
3. 相对单位使得内容自适应调节

缺点：

1. 仅适用布局、信息、框架并不复杂的部门类型网站
2. 兼容各种设备工作量大，效率低下
3. 代码累赘，出现隐藏无用的元素，加载时间加长
4. 一定程度上改变了网站原有的布局结构