移动web布局的几种方式(笔记)

1. 流式布局

1.1 什么是流式布局

• 流式布局，就是百分比布局，也称非固定像素布局。

• 通过盒子的宽度设置成百分比来根据屏幕的宽度来进行伸缩，不受固定像素的限制，内容向两侧填充。

• 百分比是相对于父盒子来设置的，比如父盒子宽度1000px，子盒子设置80%就是800px

• 流式布局方式是移动web开发使用的比较常见的布局方式。

1.2 meta视口标签

<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">

注意：在移动浏览器中当页面宽度超出设备，浏览器内部虚拟的一个页面容器，将页面容器缩放到设备那么大展示

属性	解释说明
width	宽度设置的是viewport，可以设置device-width特殊值
initial-scale	初始缩放比，大于0的数字
maximum-scale	最小缩放比，大于0的数字
minimum-scale	最大缩放比，大于0的数字
user-scalable	用户是否可以缩放，yes或no( 1或0 )

1.3 移动开发选择和技术解决方案

1.3.1 移动端主流方案

• 单独制作移动端页面
  • 通常情况下网站域名前面加 m
  • 也就是说pc端和和移动端为两套网站，大多数网站都是这样做的
• 响应式页面
  • 即pc和移动端共用一套网站，只不过在不同屏幕下，样式会自动适配，三星就是这样做的

1.3.2 移动端技术解决方案

• 移动端浏览器兼容问题

  • 移动端浏览器基本以 webkit 内核为主，因此我们就只用考虑 webkit 兼容性问题。

  • 我们可以放心使用 H5 标签和 CSS3 样式。

  • 同时我们浏览器的私有前缀我们只需要考虑添加 webkit 即可

• 移动端公共样式

  • 移动端 CSS 初始化推荐使用 normalize.css

  • Normalize.css：保护了有价值的默认值

  • Normalize.css：修复了浏览器的bug

  • Normalize.css：是模块化的

  • Normalize.css：拥有详细的文档

  • 官网地址： http://necolas.github.io/normalize.css/

1.3.3 移动端特殊样式

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

2. flex 弹性布局

2.1 特征

• 默认单行显示
• 父元素长度不够时会压缩子元素
• 当不给子元素设置宽高时，子元素会撑满父元素

2.2 父元素属性

2.2.1 display

• flex：改变元素的显示模式，变为弹性盒子

2.2.2 flex-direction

• 改变弹性盒子的主轴

• row：水平摆放(默认)

• column：垂直摆放

• row-reverse：水平摆放，相反(123 变 321)

• column-reverse：垂直摆放，相反

2.2.3 justify-content

• 子元素沿主轴的排列方式
• flex-start：沿主轴的起点开始摆放(默认，从左到右)
• flex-end：沿主轴的结束点开始摆放(不会改变子元素摆放顺序，和row-reverse不一样)
• center：水平居中
• space-evenly：平分剩余空间
• space-between：两端贴边，平分剩余空间
• space-around：每个子元素左右两边间距平分(中间多两边少)

2.2.4 flex-wrap

• nowrap：子元素不换行(默认，会压缩子元素)
• wrap：设置子元素换行展示

2.2.5 align-items

• 单行子元素沿侧轴的排列方式
• flex-start：沿侧轴的起点开始摆放(默认，从上到下)
• flex-end：沿侧轴的结束点开始摆放
• center：垂直居中

2.2.6 align-content

• 多行子元素沿侧轴的排列方式
• stretch：第一行起点摆放，剩余行平分剩余空间(默认)
• flex-start：沿侧轴的起点开始摆放(默认，从上到下)
• flex-end：沿侧轴的结束点开始摆放
• space-between：两端贴边，平分剩余空间
• space-around：每个子元素左右两边间距平分(中间多两边少)

2.2.7 flex-flow

• flex-direction和flex-wrap复合属性
• flex-flow: row wrap;

2.3 子元素属性

2.3.1 flex

• flex是下面这三个属性的简写
  • flex -grow：默认单写就是它(生长)
  • flex-shrink：仅在默认宽度之和大于容器的时候才会发生(收缩)
  • flex-basis：需要带单位固定值
• 常用的是单值语法，单写一个无单位数，表示当前子元素占父元素的总份数
• 单值语法、双值语法、三值语法
• 具体了解可以查看 MDN

2.3.2 align-self

• 控制当前元素侧轴的排列
• stretch：默认
• center：居中
• flex-start：顶部
• flex-end：底部

2.3.3 order

• 修改当前元素的排列顺序(0)
• 数字越小排列越前，可以为负数

3. rem布局

3.1 rem单位

rem是根据根标签(html标签)的font-size来改变的，比如html的font-size为16px，那么1rem就等于16px

3.2 媒体查询

3.2.1 语法规范

@media mediatype and|not|only (media feature){
  css-code;
}

@media screen and (min-width: 400px){
  html {
   	font-size: 16px;  
  }
}

/* 也可以混合使用 */ 
@media (min-width: 400px) and (max-width: 500px){
  html {
   	font-size: 16px;  
  }
}

• 用@media开头
• mediatype：媒体类型
  • all：用于所有设备
  • print：用于打印机和打印预览
  • screen：用于电脑屏幕、平板电脑、智能手机等
• and、not、only：关键字
  • and：可以将多个媒体特征连接到一起，相当于且的意思(一般只使用它)
  • not：排除某个媒体类型，相当于非的意思 ，可以省略
  • only：指定某个特征的媒体类型，可以省略
• media feature：媒体特征，必须有小括号包含
  • width：到达一定的宽度时展示对应的样式
  • min-width：到达一定的最小宽度时展示对应的样式
  • max-width：到达一定的最大宽度时展示对应的样式

3.2.2 引入外部资源

<!-- 语法规范 -->
<link rel="stylesheet" media="mediatype and|not|only (media feature)" href="style.css">
<!-- 示例 -->
<link rel="stylesheet" media="screen and (min-width: 400px)" href="style.css">