文章目录
一.视口
视口就是浏览器显示页面内容的屏幕区域。视口可以分为布局视口、视觉视口和理想视口
1.布局视口 （layout viewport）
一般移动的设备的浏览器都默认设置了一个布局视口，用于解决早期的PC端页面在手机上的显示的问题。
IOS、andriod基本上都将这个视口设为分辨率为980px，所以PC上的网页大多都能在手机上呈现，只不过
元素看上去很小，一般默认可以手动缩放网页。
2.视觉视口 （visual viewport）
字面意思，它是用户正在看到的网站的区域。注意：是网站的区域。
我们可以通过缩放去操作视觉视口，但是不会影响布局视口，布局视口仍保持原来的宽度。
3.理想视口 （ideal viewport）
为了使网站在移动端有最理想的浏览和阅读宽度而设定
理想视口，对设备来讲是最理想的尺寸
需要手动添加meta视口标签通知浏览器操作
meta视口标签的主要目的：布局视口的宽度应该与理想视口的宽度一致，简单理解就是设备有多宽，
我们得布局的宽度就有多宽
3.meta视口
<meta name="viewport" content="width=device-width,user-scalable=no,
initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0">
user-scalable 是否允许用户进行缩放 (yes or no )(1 或 2)
initial-scale 初始缩放比
maximum-scale 最大缩放比
minimum-scale 最小缩放比
二、二倍图
1.物理像素&物理像素比
物理像素点指的是屏幕显示的最小颗粒，是物理真实存在的。这里厂商在出厂时就设置好了，比如说
苹果6/7/8
我们开发的时候的1px不是一定等于1个物理像素
PC端的页面1px等于1个物理像素，但是移动端不尽相同
一个px的能显示的物理像素点的个数，称为物理像素比或屏幕像素比
2.背景缩放
background-size:背景宽度 背景高度;
里面的单位可以跟%
background-size:cover;要完全覆盖背景图片 可能有部分图片显示不全
background-size:contain;将图片扩展至最大尺寸，使其宽度和高度完全符合内容区域。
当宽度或高度有一个符合，就停止扩展，可能会有空白区域
css初始化 normalize.css
有了这句话就让盒子就变成了css3盒子模型
border 和padding 不会再撑大盒子了
box-sizing:border-box;
传统盒子模型
box-sizing:content-box;
/*css3盒子模型*/
box-sizing:border-box;
-webkit-box-sizing:border-box;
/*点击高亮我们需要清除清除 设置为transparent 完成透明*/
-webkit-tap-highlight-color:transparent;
/*在移动端浏览器默认的外观在IOS加上这个属性才能给按钮和输入框自定义样式*/
-webkit-appearance:none;
/*禁用长按页面是的弹出的菜单*/
img,a{-webkit-touch-callout:none;}
三、移动端技术类型
1.单独制作移动端页面（主流）
（1）流式布局（百分比布局）
流式布句就是百分比布局，也称飞固定像素布局
通过盒子的宽度设置成百分比根据屏幕的宽度来进行伸缩，不受固定像素的限制，内容向两侧填充
流式布局方式是移动web开发使用的比较常见的方式
max-width:;最大宽度
min-width:;最小宽度
（2）flex弹性布局（强烈推荐）
1.当父元素设为flex布局以后，子元素的float和vertical-align属性将失效
2.伸缩布局=弹性布局=伸缩盒布局=弹性盒布局=flex布局
父级 flex容器
子元素 flex项目
常见的父项属性
flex-direction:设置主轴方向
主轴：x轴方向，水平向右
侧轴：y轴方向，水平向下
元素是跟主轴来排列的
row 默认值从左到右
row-reverse 从右到左
column 从上到下
column-reverse 从下到上
justify-content:设置主轴上的子元素排列方式
flex-start 默认值从头部开始 如果主轴是x轴，则从左到右
flex-end 从尾部开始排列
center 在主轴居中对齐（如果主轴是x轴则水平居中）
space-around 平分剩余空间
space-between 先两边贴边 再平分剩余空间（重要）
flex-wrap:设置元素是否换行 （默认不换行）
nowrap 默认值，不换行
wrap 换行
align-content:设置侧轴上的子元素排列方式（多行）（在单行情况下没有作用）
flex-start 从上到下
flex-end 从下到上
center 挤在一起居中（垂直居中）
stretch 拉伸(默认值)
align-items:设置侧轴上的子元素排列方式（单行）
flex-start 从上到下（默认值）
flex-end 从下到上
center 挤在一起居中（垂直居中）
stretch 拉伸
flex-flow:复合属性，相当于同时设置了flex-direction和flex-wrap
flex布局子项常见属性
flex 子项目占的份数
align-self 控制子项自己在侧轴的排列方式
align-self属性允许单个项目与其他项目不一样的对齐方式，可覆盖align-items属性。
默认值为auto，表示继承父元素的align-items属性，如果没有父元素，则等同于stretch。
order 属性定义子项的排列顺序（前后顺序）
数字越小越靠前，默认为0 和z-index不一样
flex属性 flex:number;
flex属性定义子项目分配剩余空间，用flex来表示占多少份数
1.背景线性渐变(默认从上到下)
background:linear-gradient(起始方向，颜色1，颜色2，...)
background:-webkit-linear-gradient(left，red，blue，...)
（3）less+rem+媒体查询布局
em相对父元素的字体大小
rem（root em）适配布局 （rem是一个单位）（相当与html元素的字体大小）
媒体查询（Media Query）是CSS3新语法
1.使用@media查询，可以针对不同的媒体类型定义不同的样式
2.@media可以针对不同的屏幕尺寸设置不同的样式
3.当你重置浏览器大小的过程中，页面也会根据浏览器的宽度和高度重新渲染页面
4.目前针对很多苹果手机。Andriod手机，平板等设备都用得到多媒体查询
媒体类型 关键字 媒体特性
@media mediatype and|not|only{media feature}{
CSS-Code;
}
(1)mediatype
all 用于所有设备
print 用于打印机和打印预览
screen 用于电脑屏幕，平板电脑，智能手机等
and 可以将多个媒体特性连接到一起，相当于“且”的意思
not 排除某个媒体类型，相当于“非”的意思，可以省略
only 指定某个特定的媒体类型，可以省略
width 定义输出设备中页面可见区域的宽度
min-width 定义输出设备中页面最小可见区域的宽度
max-width 定义输出设备中页面最大可见区域的宽度
混合布局
2.响应式页面兼容移动端（其次）
媒体查询
媒体查询（Media Query）是CSS3新语法
1.使用@media查询，可以针对不同的媒体类型定义不同的样式
2.@media可以针对不同的屏幕尺寸设置不同的样式
3.当你重置浏览器大小的过程中，页面也会根据浏览器的宽度和高度重新渲染页面
4.目前针对很多苹果手机。Andriod手机，平板等设备都用得到多媒体查询
媒体类型 关键字 媒体特性
@media mediatype and|not|only{media feature}{
CSS-Code;
}
(1)mediatype
all 用于所有设备
print 用于打印机和打印预览
screen 用于电脑屏幕，平板电脑，智能手机等
and 可以将多个媒体特性连接到一起，相当于“且”的意思
not 排除某个媒体类型，相当于“非”的意思，可以省略
only 指定某个特定的媒体类型，可以省略
width 定义输出设备中页面可见区域的宽度
min-width 定义输出设备中页面最小可见区域的宽度
max-width 定义输出设备中页面最大可见区域的宽度
（2）less
1.less变量
@变量名：值
命名规范：
·必须有@为前缀
·不能包含特殊字符
·不能以数字开头
·大小写敏感
2.less编译
安装easy less插件
3.less嵌套（写在less后缀的文件里）
.hearder{
width: 200px;
height: 200px;
background-color: pink;
a{
color:red;
}
}
伪类选择器的写法
·内层选择器的前面没有&符号，则它被解析为父选择器的后代
·如果有&符号，它就被解析为父元素自身或父元素的伪类
4.less运算
less提供加、减、乘、除（除法要打上括号）
（1）运算符的左右两侧必须敲一个空格隔开
（2）两个数参与运算 如果只有一个数有单位，则最后的结果就以这个单位为准
（3）两个数参与运算，如果两个都有单位，而且不一样的单位，最后的结果以第一个单位为准
5.导入less文件(可以把一个样式文件导入另一个样式文件)
@import “common”
6.rem适配方案1
元素大小取值方法
（1）最后的公式：页面元素的rem值=页面元素值（px）/（屏幕宽度/划分的份数）
（2）屏幕宽度/划分的份数就是html font-size的大小
（3）或者：页面元素的rem值=页面元素值（px）/html font-size的字体大小
7.rem适配方案2
px转换rem 插件cssrem
四、响应式布局
1.响应式开发（需要一个父级做为布局容器）
超小屏幕（手机） <768px
小屏（平板） >=768px <992px
中等屏幕（桌面显示器） >=992px <1200px
宽屏设备（大屏显示器） >=1200px
原理就是在不同的屏幕下，通过媒体查询来改变这个布局容器的大小，
再改变里面子元素的排列方式，从而实现不同屏幕下，看到不同的页面和样式变化
平时的响应式尺寸的划分
超小屏幕（手机） 设置宽度为100%
小屏（平板） 设置宽度为750px
中等屏幕（桌面显示器） 宽度设置为970px
宽屏设备（大屏显示器） 宽度设置为1170px
2.bootstarp前端开发框架
（1）创建文件夹结构
（2）创建html骨架结构
（3）引入相关样式文件
（4）书写内容
3.bootstarp栅格系统
行必须放到container布局容器里
实现列的平均划分 需要给列添加类前缀
.col-xs- xs-extra small :超小;
.col-sm- sm-small: 小;
.col-md- md-medium: 中等;
.col-lg- lg-large 大;
列小于12份的时候会有空白
列大于12列的时候多余的那一列另起一行显示
将页面划分为几个等宽的列
每列都有默认的padding 15px
嵌套的时候增加一个行盒子
列的偏移
-offset-
列排列
-push- 推
-pull 拉
响应式工具
类名 超小屏 小屏 中屏 大屏
.hidden-xs 隐藏 可见 可见 可见
.hidden-sm 可见 隐藏 可见 可见
.hidden-md 可见 隐藏 可见 可见
.hidden-lg 可见 可见 可见 隐藏
visiable 是显示