实现页面响应式布局需要认真了解以下两点:
- 弹性盒模型
- 媒体查询
1、弹性盒模型介绍:
弹性盒布局模型是css3规范中提出的一种新的布局方式。
目前:提供一种更加高效的方式来对容器中的条目进行布局、对其和分配空间。
优势:这种布局模型已被主流浏览器所支持,可以在web应用开发中使用。
注意需设置盒子为弹性的:display:flex;
flex相关的属性:
- 设置主轴的方向:
flex-direction:row(水平方向)
flex-direction:column(垂直方向) - 设置主轴的对齐方式:
justify-content:flex-start(默认,顶端对齐)
justify-content:flex-end(末段对齐)
justify-content:center(居中对齐)
justify-content:space-between(两端对齐,中间自动分配)
justify-content:space-around(自动分配距离)
2、媒体查询
(1)媒体查询:根据设备显示的特性(如视口宽度、屏幕比例、设备方向:纵向还是横向)为其设定的css样式;
(2)作用:可以在不改变页面内容的情况下,为特定的一些输出设备定制显示效果,是响应式布局实现的主要方式;
(3)语法:
@media mediatype and|not|only(media feature){
css-code;
}
(4)注意:
- 用@media开头,只有@符号
- mediatype 媒体类型
- 关键字 and not only
- media feature 媒体特性必须用小括号包括
(4.1) mediatype 查询类型
将不同的终端设备划分为不同的类型,称为媒体类型
all:用于所有设备
print:用于打印机和打印预览
screen:用于电脑屏幕、平板电脑、智能手机等
(4.2)关键字
关键字将媒体类型或多个媒体特性连接到一起做为媒体查询的条件
- and:可以将多个媒体特性连接到一起,相当于“且”的意思
- not:排除某个媒体类型,相当于“非”,可以省略
- only:指定某个特定的媒体类型,可以省略
(4.3)媒体特性
每种媒体类型都具体各有不同的特性,根据不同的媒体类型的媒体特性设置不同的展示风格,暂且了解三个,注意要用小括号包含
当然关于rem可以看看这个博客的内容 html和rem的适配
再说说实现移动端布局方式有哪些?
- 100%布局,又叫弹性布局(如之前的拉勾网)
- rem布局(等比例缩放,如网易)
- vw布局
1920px X 1080px——物理像素
980px ——逻辑像素
比如iPhone 6 :
750px 物理
375px 逻辑
分辨率有哪些:
安卓:480* 800、 480* 854 、540* 960 、720* 1280 、1080* 1920
iPhone:640* 960、 640* 1136、 1242* 2208、 1334* 750
移动端布局使用的单位有哪些?
em、rem、%、vw、vh
上面都是相对单位,可以根据viewport的变化,进行实时的改变
vw单位 1vw = 屏幕宽度 / 100 = 1%的屏幕宽度
vh单位 1vh=屏幕高度 / 100 = 1%的屏幕高度
下面来看通过vw实现移动端页面
注意:移动端开发是书写比例,实际像素 / 设计图的总宽度 = 比例
vw转换px:
设备的分辨率为640* 1136,逻辑像素为320* 568 ,1 vw = 3.2px font-size:100px;
转换为vw 的font-size :31.25vw;所以 1rem = 31.25vw