移动端布局

视口（viewport）

布局视口（layout viewport

）

视觉视口 （visual viewport）

理想视口（ideal viewport）

视口标签

meta

二倍图

精灵图缩放后 的坐标

背景图片缩放background-size

background-size：背景图片宽度 背景图片高度；

1. 例如background-size：50px；只写一个参数 其宽度和高度会等比例缩放。
2. 例如background-size：50%；里面的单位可以跟%，相对于父盒子来说的。
3. 例如background-size:cover;等比例拉申 要完全覆盖div盒子，可能有部分图片显示不全。
4. 例如background-size：contain；高度和宽度等比例拉申 当宽度或高度 铺满div盒子就不再拉申了，可能有部分空白区域。

移动端开发选择

移动端

响应式

** 移动端解决问题**

移动端常见布局

单独制作移动端页面（主流)

流式布局（百分比布局）

flex弹性布局（强烈推荐）

flex弹性布局 用来为盒子提供最大的灵活性，任何一个容器都可以指定flex布局。

flex-direction :设置主轴的方向

justify-content:设置主轴上的子元素排列方式

flex-wrap：设置子元素是否换行

flex布局默认是不换行的，会缩小子元素的宽度，放到父元素里面。

align-content：设置侧轴上的子元素排列方式（多行）

align-items ：设置侧轴上的子元素排列方式（单行）

stretch拉伸 盒子不要给高度

flex-flow ：复合属性，相当于同时设置了flex-direction和flex-wrap

flex-flow：row wrap；

flex 属性定义子项分配剩余空间，用flex表示占多少份
flex:1;
align-self 属性控制子项自己在侧轴上的排列方式 （自己控制自己）

order 属性定义项目的排列顺序 默认是0 数值越小越靠前。

less+rem+媒体查询布局

rem

em 相对于父元素的字体大小来说的
rem相对于html元素字体大小来说的
rem的优点是可以通过修改html里面的文字大小来改变页面中元素的大小可以整体控制

媒体查询（Media Query）

1. 使用媒体查询，可以针对不同媒体类型定义不同的样式。
2. @media可以针对不同的品目尺寸设置不同的样式。
3. 当重置浏览器的大小过程中，页面也可以根据浏览器宽度和高度重新渲染页面。
4. 目前针对很多苹果手机、安卓、平板等设备都用的到媒体查询。
   

@media mediatype and|not|only (media feature){
CSS-Code;}

媒体查询最好的方法是从小到大

引入资源是针对不同屏幕尺寸，调用不同的css文件

less

css弊端

less(Leaner Style Sheets的缩写)是一门css扩展语言，也成为css预处理器。
它没有减少css功能，而是在css语法上，为css加入程序语言特新。
它在css的语法基础之上，引入了变量，Mixin（混入），运算以及函数等功能，大大简化了css缩写，并且降低了css维护成本，less可以让我们用更少的代码作更多的事。
less中文网址：http://lesscss.cn/
常见的css预处理器：Sass、Less、Stylus
一句话：less是一门css预处理器，它扩展了css的动态特性。

1. less变量
   
   

2. Less编译
   vscode中easyless插件 ctrl+s保存直接生成css文件

3. less嵌套
   

4. less运算

运算除法加括号

rem适配方案

1. less 、媒体查询、rem
   
   
   

2. flexible.js 、rem

混合布局

响应式（其次）

响应式需要一个父级作为布局容器，来配合盒子级元素实现变化效果。
原理是在不同屏幕下，通过媒体查询来改变这个布局的大小，在改变里面子元素的排列方式和大小，从而实现不同屏幕下看到不同页面布局和样式变化。

媒体查询

bootstarp

优点：标准化的html+css编码规范
提供了一套简介、直观、强悍的组件
有自己的生态，不断更新迭代
让开发更简单提高开发效率
bootstarp 使用 ：1创建文件夹结构 2创建html股价结构

3引入相关样式文件
4书写内容：直接拿bootstrap预先定义好的样式来使用 修改bootsrap原来的样式，注意权重。
关键 知道它定义那些样式，以及这些样式实现什么样的效果。
布局容器

栅格系统
栅格选项参数
列嵌套最好加1个行 row 这样可以取消父元素的padding值，而且高度自动和父级一样高

列偏移
"col-md-offset-"列向右偏移，相当于当前元素增加了左边距。
列排序
col-md-push推和col-md-pull拉

响应式工具

vw和vh | vmin和vmax

相对单位 相对视图的尺寸计算结果 vw(viewport width) vh（viewport width 基本不用） 1vw=1/100视口宽度

vmin 是照顾手机横屏和竖屏

以上都是学习黑马pink老师课程的笔记