响 应 式 布 局
一、响应式布局:写一套css样式可以兼容多个终端设备,为移动互联网的开发做出了重要贡献
优点:一套样式可以兼容多个终端设备,灵活性更强
缺点:工作量增加,容易造成代码冗余,影响加载速度
核心原理:主要使用css3的媒体查询实现不同设备的响应
二、媒体查询
1.外联式媒体查询
<link rel="stylesheet" media="screen and (min-width:960px)" href="red.css"/>
<link rel="stylesheet" media="screen and (max-width:960px)" href="blue.css"/>
当屏幕窗口大于960px时,引入red.css文件,当屏幕窗口小于等于960px时,引入blue.css文件
2.内嵌式媒体查询
@media screen and (min-width:960px){
body{
background:red;
}
}
@media screen and (min-width:640px) and (max-width:960px){
body{
background:blue;
}
}
当屏幕窗口大于960px时,body背景色为红色,当屏幕窗口大于640px,并且小于960px时,body背景色为蓝色
三、标准盒模型和怪异盒模型
标准盒模型=content+padding+border+margin
怪异盒模型=content+margin
注:怪异盒模型中,padding和border不计入总宽总高中
当没有写文档声明时,就会触发某些浏览器的怪异模式
四、box-sizing的可选属性值有哪些及其含义
1.box-sizing:border-box;
注:padding和border不会计入总宽,总高中(即怪异盒模型)
2.box-sizing:content-box;
注:padding和border要计入总宽,总高中(即标准盒模型)
注:box-sizing是css3新增的属性,低版本IE浏览器不支持
主要应用在移动端
移 动 端 布 局
一、移动端相关概念
1.屏幕尺寸
屏幕尺寸是指屏幕对角线的长度,单位为英寸,1英寸=2.54厘米
iphone7 4.5寸
iphone7plus 5.5寸
2.屏幕分辨率
屏幕分辨率是指横纵方向上的像素点数,单位为px,我们也把屏幕分辨率称为物理像素
常见移动端设备屏幕分辨率
iphone4 960px*640px
iphone5 1136px*640px
iphone6 1334px*750px
iphone7 1334px*750px
iphone6plus
=> 1920px*1080px
iphone7plus
3.屏幕像素密度:屏幕上每英寸可以显示的像素点数,称为屏幕像素密度,单位为ppi
4.设备像素比DPR:指物理像素与逻辑像素的比值,也叫做设备像素比(DevicePixelRetio)
注:物理像素指屏幕分辨率
逻辑像素指设备尺寸
常见移动端设备尺寸:
iphone4 480px*320px dpr=2
iphone5 568px*320px dpr=2
iphone6 667px*375px dpr=2
iphone6plus 736px*414px dpr=3
5.移动端meta设置
默认情况下可视窗口的宽度大于我们移动端设备的宽度,此时我们需要做如下设置:
<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no"/>
注:sublime设置viewport快捷键:meta:vp + tab键
二、常见移动端布局方案
1.百分比布局(流式布局):以百分比为主要单位进行页面布局
特点:文字流式,控件弹性,图片等比例缩放,顶部和底部不管分辨率怎么变化,高度都不变
注:适用于页面布局比较简单的移动端项目
典型案例:拉勾网
2.rem布局(等比例缩放布局)
特点:使用rem为主要单位进行页面布局,很好的实现了在页面在不同尺寸设备上等比例缩放
3.混合式布局
特点:将多种布局方式混合在一起使用,实现移动端屏幕的适配
三、移动端常用到的相关单位
1.px
像素,相对于屏幕分辨率而言
2.em
相对于父元素字体大小的单位
1em = 16px
注:em是相对于父元素字体大小放大或缩小多少倍
由于父元素字体大小不固定,所以不推荐使用em单位进行布局
3.rem
相对于根元素字体大小的单位
注:由于根元素(html)字体大小固定一般不会改变,所以推荐使用rem进行移动端布局
1em = 16px = 12pt = medium
4.vw
vw是viewport width的缩写,1vw = 视窗宽度的1% (设备宽度的1%)
vh 视窗高度
vmax vh和vw中较大的那个
vmin vh和vw中较小的那个
四、自定义字体
@font-face{
font-family:"自定义字体名称";
src:url(字体文件路径);
}
body{
font-family:"自定义字体名称";
}