从零开始学习前端开发 — 13、响应式布局以及移动端布局
响 应 式 布 局
一、响应式布局:写一套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:"自定义字体名称";
}
