响应式web设计
理念:基于流动布局、弹性图片、弹性表格、弹性视频和媒体查询等技术组合。使用百分比布局创建流动的弹性界面,同时利用媒体查询来限制元素的动态范围。
视口有两种:
1.可见视口(即设备大小→屏幕分辨率)
2.视窗视口(网页宽度→网页制作的原始大小)
例如:
打开一个网页,设备屏幕是414px的宽度,在浏览器中,414px的屏幕宽度能够展示1200px宽度的内容。那么414px就是可见视口宽度,1200px就是视窗视口宽度。
<meta>
标签:可以配置视口属性
语法:
<meta name="viewport" content="user-scalable=no,width=device-width,initial-scale=1.0,maximum-scale="1.0">
注:
user-scalable=no:用于设置用户是否可以缩放,默认为yes
idth=device-width:用于设置视窗视口宽度,此表示与可见视口宽度相同
initial-scale:用户设置初始缩放比例,取值为0-10.0
maximum-scale:最大缩放比例
之外,还可以设置height属性设置视窗视口宽度,minimum-scale设置最小缩放比例
媒体查询
由媒体类型和条件表达式组成,可以根据视口宽度、设备方向等差异来改变页面显示方式。
示例代码:
@media screen and (max-width:960px){
/*样式设置*/
}
加载兼容文件js
由于IE8既不支持HTML5和CSS3 Media,则需要加载两个js文件,来实现兼容效果:
<!--[if It IE 9]>
<scrippt src="路径"></script>
<scrippt src="路径"></script>
</[endif]-->
设置断点
1.传统方式是使用一些固定的宽度进行划分
2.根据内容进行设置断点以及设置多少个断点
百分比布局
固定布局(以像素为单位)可以换算Wie百分比宽度,来实现百分比布局
换算公式:目标元素宽度/父盒子宽度=百分数宽度
aside{width:250px;}→aside{width:50%;}
注意:父盒子宽度500px
弹性盒布局
弹性盒(改进了块模型,既不是用浮动,也不会在弹性盒容器与其内容之间合并外边距,是一种非常灵活的布局方法):
- 容器
- 子元素
- 轴
display
用于指定弹性盒的容器,取值可以为flex;若为行内元素,值为inline-flex