HTML响应式布局( 移动端设计 )

响应式布局

---

响应式布局

• 网页可以根据不同的设备或窗口大小呈现出不同的效果
• 使用响应式布局，可以使一个网页适用于所有设备
• 响应式布局的关键是 媒体查询
• 通过媒体查询，可以为不同的设备，或设备不同状态来分别设置样式

---

媒体查询的用法

• 语法： @media 查询规则( )
• 媒体类型：all 所以设备
• 媒体类型：print 打印设备
• 媒体类型：screen 带屏幕的设备
• 媒体类型：speech 屏幕阅读器
• 可以使用逗号连接多个媒体类型，这样他们之间就是一个或的关系
• 可以在媒体类型前添加一个only，表示只有
• only 的使用主要是为了兼容一些老版本浏览器

---

媒体特性：

• width 视口的宽度
• height 视口的高度
• min-width 视口的最小宽度（视口大于指定宽度时生效）
• max-width视口的最大宽度（视口小于指定宽度时生效）

@media(min-width:500px){	/*视口大于500px时生效*/
	body{
		background-color: #bfa;
	}
}

• 样式切换的分界点，我们称其为断点，也就是网页的样式会在这个点时发生变化
• 一般比较常用的断点

1. 小于768 超小屏幕 max-width=768px
2. 大于768 小屏幕 min-width=768px
3. 大于992 中型屏幕 min-width=992px
4. 大于1200 大屏幕 min-width=1200px

---

响应式设计的网页

1. 移动端优先
2. 渐进增强