前言
自适应(adaptive):针对不同的设备会有不同的显示解决方案。对于每个尺寸(设计时候选择的几个设备典型尺寸)都进行设计和编码。
- 优点: 可以独立设计,做到数据库同步,方案灵活,可以独立优化符合搜索引擎的规则。
- 缺点: 内容无法做到一致,工作量大,SEO权重分散,访客浏览体验有缺陷。
响应式(responsive):通过视口分辨率,针对不同客户端在客户端做代码处理,展示不同的显示解决方案。
- 优点: 方便浏览,用户体验一致,无需单独设计,优化权重不分散。
- 缺点: 设计风格有局限,复杂的框架结构不好实现。
序号 | 自适应 | 响应式 |
---|---|---|
1 | 不同设备不同的页面 | 统一页面适应不同的视口分辨率 |
2 | 开发多套界面 | 开发一套界面 |
3 | 屏幕适配在一定范围内,例如 PC 端一般要大于 1024 像素 | 一套页面全部适应 |
4 | 屏幕太小会出现拥挤 | 自动识别屏幕宽度做出相应调整 |
方案种类
- rem(root em)
- 百分比(%)
- viewport(视口)
- css 的 @media
rem
CSS3 新增的一个相对单位(root em, 根 em),为元素设定字体大小相对于 HTML 根元素。处理 IE8 及更早版本外,所有浏览器均已支持rem。
通常使用都是在 js 中根据屏幕的宽度来设定不同的 根em 大小
1 |
|
1 | p { |
在 IDEA 中有一个插件 pxTOrem,详情请看 -> https://gitee.com/jay763190097/px2rem_idea。
百分比(%)
盒子的宽度或者高度设置百分比形式,继承父元素的宽高的百分比。
margin 设置百分比在默认情况下是相对于父元素的宽度。
padding 设置百分比在默认情况下是相对于父元素的宽度。
这只发生在默认的 writing-mode: horizontal-tb; 和 direction: ltr; 的情况下,当书写模式变成纵向的时候,其参照将会变成包含块的高度。
1 | .box { |
viewport(视口)
桌面端的视口是指浏览器的可视区域;移动端有3个视口:Layout Viewport(布局视口)、Visual Viewport(视觉视口)、Ideal Viewport(理想视口)。
浏览器视口宽度等于设备屏幕宽度:<meta name="viewport" content="width=device-width, initial-scale=1.0">
CSS3规范,视口单位主要包括以下4个:
- vw: 1vw 等于视口宽度的 1%
- vh: 1vh 等于视口高度的 1%
- vmin: 选取 vw 和 vh 中的最小的
- vmax: 选取 vw 和 vh 中的最大的
可以应用在视口区域必须显示的内容部分。
css 的 @media
根据不同的屏幕分辨率,选择应用不同的CSS规则。例如 Bootstrap 的响应式设置。
1 | <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
1 | /* 超小设备(手机,小于 768px) */ |