高效移动web布局

移动布局

【需求】根据元素个数不同，自动填充
【解决】flex布局

1. flex弹性布局

基本使用

.parent{
display:webkit-flex;
}
.item1{
flex:1;
}
.item2{
flex:2
}

弹性布局，以1:2划分
移动端一般用的比较多的是混合弹性布局，如下需要图片固定，文字按比例缩放
在这里插入图片描述
混合弹性布局实现方式如下

水平垂直居中

flex布局还可以实现水平垂直居中，并且多次使用

  .self-table-first-col {
          display: webkit-flex;
          justify-content: center;
          align-items: center;
          }

这篇文章讲解更详细阮一峰flex布局

2. 响应式布局

由于兼容性，建议使用旧版flex布局，新旧版本属性对比如下
在这里插入图片描述

【响应式布局】：在不同的宽度下加载不同的内容，开发一个页面，可以在pc,ipad,手机上都展示

a. 媒体查询

例子

@media (max-width: 600px) {
  .facet_sidebar {
    display: none;
  }
}

max-width:600px表示应用其所包含样式的条件最高是宽度为600px，大于600px则不满足条件，不会应用此样式。

逻辑操作符

and

在横屏时应用这个，你可以使用 and 操作符合并媒体属性

@media (min-width: 600px) and (orientation: landscape) { ... }

现在上面的媒体查询仅在可视区域宽度不小于600像素并在横屏时有效。如果，你仅想在电视媒体上应用，你可以使用 and 操作符合并媒体属性：

@media tv and (min-width: 600px) and (orientation: landscape) { ... }

逗号分隔列表

媒体查询中使用逗号分隔效果等同于or逻辑操作符,例如，如果你想在最小宽度为600像素或是横屏的手持设备上应用一组样式，你可以这样写：

@media (min-width: 600px), handheld and (orientation: landscape) { ... }

handheld是和tv一样，媒体类型

常用类型与参数

在这里插入图片描述
更多详细内容在媒体查询MDN

b. 设计点

百分比布局
弹性图片：图片设百分百，用一个div包着图片，根据media响应式改变
重新布局，显示和隐藏

c. 思考

在这里插入图片描述

3. 移动web特别样式处理

高清图片

移动web高清图片定义：这张图多大就应该显示多大，比如一张图100100像素，在高清屏幕上以100px100px显示，因为缩放比为2，这张图片就会被拉大。为了避免图片产生模糊，图片的高宽应该用物理像素单位渲染。即用100dp*100dp

一像素边框

1px在项目中的解决及原理

rem相对单位

为了适应各大屏幕的手机，px略显固定，不能根据尺寸的大小而改变，使用相对单位更能体现页面兼容性。

em:根据父节点的font-size为相对单位
rem:根据html的font-size为相对单位

em在多层嵌套之下难以实用，建议使用rem
【rem基础值设置为多少比较好？】
为了适应各大手机
rem=screen.width/20
在这里插入图片描述
【建议font-size不要用rem】
因为字体是为了阅读性