移动端页面布局开发

background-size

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

特殊样式

1. css3盒子模型box-sizing: border-box;``-webkit-box-sizing: border-box;
2. 点击高亮 清除-webkit-tap-highlight-color: transparent;
3. 在ios上移动端浏览器默认的外观加上-webkit-appearance: none;才能给按钮/输入框添加自定义样式
4. 禁用长按页面时弹出菜单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设置主轴**上子元素排列方式

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设置侧轴**上的子元素排列方式

（多行⬅️换行）

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;}
}

引入资源

less语法

1.less嵌套

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

.nav {
  .logo {
    color: green;
  }
  &::before {
    content: " ";
  }
}

三.rem实际开发适配方案

1.元素大小取值方法

响应式布局(Bootstrap框架）

一.响应式布局容器

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