移动端页面布局开发

background-size

background-size: 500px 200px; 只写一个宽度background-size: 500px ;省略高度 background-size: 50%;百分比是相对于父盒子来说的 background-size: cover;要完全覆盖div盒子，图片可能会有部分显示不全 backgroung-size: contain宽高任意一个喝盒子的边缘重合即停止

特殊样式

css3盒子模型box-sizing: border-box;``-webkit-box-sizing: border-box; 点击高亮 清除-webkit-tap-highlight-color: transparent; 在ios上移动端浏览器默认的外观加上-webkit-appearance: none;才能给按钮/输入框添加自定义样式 禁用长按页面时弹出菜单img,a {-webkit-touch-callout: none;}

移动端常见布局 流式布局

flex布局 原理

任何容器都可指定为flex布局 当为父元素指定为flex布局之后，子元素的float,clear,vertical-align都将失效

一.flex布局父项常见属性 1.flex-direction设置主轴方向 主轴为x轴：flex-direction: row; 主轴为y轴：flex-direction: column; 2. justify-content设置主轴 上子元素排列方式

属性值 说明 flex-start （默认值）从头部开始排列（如果主轴是x轴，就从左到右排列） flex-end 从尾部开始排列 center 在主轴居中对齐 space-around 平分剩余空间 space-between 先两边贴边，再平分剩余空间（重要） 3.flex-wrap设置子元素是否换行 flex-wrap: nowrap; 不换行（默认值） flex-wrap: wrap; 换行 4. align-items设置侧轴 上的子元素排列方式 （单行） align-items: flex-start; align-items: flex-end; align-items: center;挤在一起居中（垂直居中） align-items: stretch;拉伸（默认值） 5. align-content设置侧轴 上的子元素排列方式 （多行:arrow_left:换行） align-content: flex-start; align-content: flex-end; align-content: center; align-content: space-around; align-content: space-between; align-content: stretch; 6.flex-flow相当于同时设置flex-direction和flex-wrap For example: flex-flow: row wrap; flex-flow: column nowrap; 二.flex布局子项常见属性 1.flex属性 定义子项目分配剩余空间，用flex表示占多少份。2.align-self属性 控制子项自己在侧轴上的排列方式 允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性。

rem适配布局 ####一.rem基础 em是相对于 父元素的字体大小来说的 rem是相对于html 的字体大小来说的 rem的优点是可以通过修改html的字体大小来改变页面中元素的大小 ####二.媒体查询(Media Query) 可以针对不同的屏幕尺寸设置不同的样式 @media mediatype and/not/only (media feature) { CSS-Code;} 复制代码 @media screen and (max-width: 800px) { body {background-color: blue;} } 复制代码

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

引入资源

针对不同的屏幕尺寸，调用不同的css文件。

less语法 1.less嵌套

子元素的样式直接写到父元素里 如果有伪类，伪元素选择器，交集选择器，内层选择器之前要加**&**

.nav { .logo { color: green; } &::before { content: " "; } } 复制代码

三.rem实际开发适配方案 1.元素大小取值方法

页面元素的rem值= 页面元素值(px)/（屏幕宽度/划分的分数） 屏幕宽度/划分的分数 就是html font-size的大小 页面元素的rem值= 页面元素值(px)/ html font-size的大小

响应式布局(Bootstrap框架） 一.响应式布局容器 响应式需要一个父级作为布局容器，来配合子元素实现变化效果。在不同屏幕下，通过媒体查询来改变布局容器的大小，再改变子元素的布局方式和大小。

尺寸划分：(最常用） 超小屏幕（手机，小于768px）width: 100% 小屏幕（平板，大于等于768px）width: 750px 中等屏幕（桌面显示器，大于等于992px）width: 970px 大屏幕（大桌面显示器，大于等于1200px）width: 1170px