移动端-屏幕适配/媒体查询

屏幕适配

移动页面最理想的状态是，避免滚动条且不被默认缩放处理，我们可以通过设置来进行控制，并改变浏览器默认的视口的宽度。

控制缩放

适配方案

• 固定宽度(很少用)
• 百分比(设置元素高度有局限性)

• rem
  1.设置viewport
  2.设置页面元素宽度单位为rem 或 em

em 相对长度单位，其参照当前元素字号大小，如果当前元素未设置字号则会继承其祖先元素字号大小。rem 相对长度单位，其参照根元素(html)字号大小。

• 100像素

1. 设置网页宽度等于设备物理像素
2. 设置初始化缩放比例（值为1 / window.devicePixelRatio）淘宝针对iphone采用此方案

媒体查询

通过媒体查询可以检测当前网页运行在什么终端，可以有机会实现网页适应不同终端的展示风格。

媒体类型

媒体特性

关键词

关键字将媒体类型或多个媒体特性连接到一起做为媒体查询的条件。

• and 可以将多个媒体特性连接到一起，相当于“且”的意思。
• not 排除某个媒体类型，相当于“非”的意思，可以省略。
• only指定某个特定的媒体类型，可以省略。

引入方式

1.link标签引入

2.css方式

@media only screen and (max-width: 640px) {
    html {
        background-color: pink;
    }
    /* 其它任意样式表 */
}

常用特性

1. width / height完全等于视口
2. max-width / max-height 小于等于layout viewport
3. min-width / min-height 大于等于layout viewport
4. device-width / device-height 完全等于ideal viewport
5. orientation: portrait | landscape 肖像/全景模式