移动端布局
移动端技术选型
单独制作移动端页面（主流）
- 流式布局（百分比布局）
- flex弹性布局
- less+rem+媒体查询
- 混合布局
- 好处
- 移动端有良好的用户体验
- 缺点
- pc端和移动端代码是单独，代码量极大
响应式页面兼容移动端（其次）
- 媒体查询
- bootstarp
选择布局方式：页面布局相对比较简单，pc端和移动端布局差异性比较小，可以使用响应式布局，页面布局复杂，pc端和移动端布局没有联系，就使用移动端布局。
流式布局（百分比布局）
- 流式布局，就是百分比布局，也称非固定像素布局
- 通过盒子的宽度设置成百分比来根据屏幕的宽度来进行伸缩，不受固定像素的限制，内容向两侧填充。
- 更多用于移动端，移动端的屏幕大小都有差异，为了网页能够适配不同的屏幕，让正常显示
- 好处:
- 对不同的屏幕有一定的适应性
- 缺点：
- 当屏幕宽度足够小，导致内容无法查看
弹性布局flex(弹性盒模型)
- 详情可在web前端分类中的弹性盒模型中查看(弹性盒模型) 请点击–>弹性盒模型flex
rem+媒体查询+less
像素
百分比： 可将属性值设置为相对于其父元素属性的百分比
设置百分比，可以使子元素跟随父元素改变而改变
em
是相对于父元素的字体大小来计算的
1 em= 1*font-size(父元素的)
em会根据字体大小的改变而改变
rem
- rem是相对于根元素
html元素的字体大小来计算 - 应用：可以通过修改html里面的文字大小来改变页面中元素的大小，可以整体控制
媒体查询（Media Query)
- 媒体：在网页中媒体指的是各种设备，比如：电视、手机、电脑、打印机等等
- 查询：检测当前的屏幕属于哪种设备，以及属于哪种类型，根据这些信息我们采用对应的css代码，能够实现在不同 的屏幕上有不同的用户体验（页面效果）
概述
- 使用
@media查询,可以针对不同的媒体类型定义不同的样式 @media可以针对不同的屏幕尺寸设置不同的样式- 重置浏览器页面大小的过程中，页面也会根据浏览器的宽度和高度 重新渲染页面
- 一般按照从小到大的顺序来
语法规范
引入资源
- 当样式比较繁多时，可以针对不同的媒体使用不同的 stylesheets（样式表)
- 原理： 直接在link中判断设备的尺寸，然后引入不同的css文件
语法规范
<link rel="stylesheet" media="mediatype and|not|only (media feature)" href="mystylesheet.css">
css编写
@media 媒体类型{
选择器{
css代码
}
}
- 用
@media开头，注意@符号
mdiatype 媒体类型(查询类型)
all：用于所有设备print用于打印机和打印预览screen用于电脑屏幕，平板电脑，智能手机等
| 值 | 设备类型 |
|---|---|
| All | 所有设备 |
| 打印设备 | |
| Screen | 电脑显示器，彩色屏幕 |
| Braille | 盲人用点字法触觉回馈设备 |
| Embossed | 盲文打印机 |
| Handhelp | 便携设备 |
| Projection | 投影设备 |
| Speech | 语音或者音频合成器 |
| Tv | 电视类型设备 |
| Try | 电传打印机或者终端 |
关键字 :
将媒体类型或多个媒体特性连接到一起作为媒体查询的条件
and：可以将多个媒体特性连接到一起，相当于 ‘ 且 ‘ 的意思@media screen and (min-width:750px) and (max-width:1200px) { .box{ background-color: tomato; } },：代表或者的意思，即满足逗号前后任意一个条件即可- 注意：逗号前后的媒体类型是独立的
/* , 代表或者的意思 */ /* ,前后的设备类型是相互独立 */ @media screen and (max-width:750px), print and (min-width:1200px) { .box{ background-color: yellowgreen; } }not：排除某个媒体特性，相当于 ‘非’ 的意思，可以省略/* not 代表非，不是的意思 ，否定的是媒体的特性*/ @media not screen and (width:320px){ .box{ background-color: tomato; } }only：指定某个特定的媒体类型- 代表唯一，这个条件放在媒体类型的前面，就是一种修饰的作用，强调
- only在老版本的浏览器，可以用于选择特殊的一些版本，某些浏览器不支持媒体查询，用only排除
media feature 媒体特性，必须有小括号包含
- 概念：媒体特性是指媒体设备的特性，用来描述设备的特点，比如：设备的宽度、高度
- 我们可以利用媒体特点来区分pc端还是移动端
| 值 | 描述 |
|---|---|
| width | 网页显示区域完全等于设备的宽度 |
| height | 网页显示区域完全等于设备的高度 |
| max-width | 网页显示区域小于等于设备宽度 |
| max-height | 网页显示区域小于等于设备高度 |
| min-width | 网页显示区域大于等于设备的宽度 |
| min-height | 网页显示区域大于等于设备的高度 |
| orientation | portrait (竖屏模式) | landscape (横屏模式) |
rem适配方案
- 让一些不能自适应的元素,达到当设备尺寸发生变化时,等比例适配当前设备
- 使用媒体查询根据不同的设备按比例设置html的字体大小,然后页面元素使用rem做单位,当html字体大小变化,元素尺寸也会发生变化,从而达到等比缩放的适配
rem适配方案-元素大小的取值
- 公式:页面元素的rem值=页面元素值(px)/(屏幕宽度/划分的份数)
- 屏幕宽度/划分的份数,就是html font-size 的大小
- 或是:页面元素的rem值=页面元素值(px)/html font-size 字体大小
选取步骤
- 首先,选取一套标准尺寸 一般以750为准
- 用屏幕尺寸除以我们划分的份数,得到了html里文字的大小,不同屏幕下得到的文字大小是不一样的
- 页面元素的rem值=页面元素在 750像素下的px值 除以 html 里面的文字大小
响应式布局
概述
原理：利用媒体查询，实现当使用不同的设备时可以采用不同的css样式，即一套代码，多端使用，同时保证无论哪种设备进行访问时，都有良好的用户体验
设备划分 尺寸区间 响应式尺寸设置 超小屏幕(手机) <768px 宽度为100% 小屏设备(平板) >=768px~ <992px 宽度为750px 中等屏幕（桌面显示器） >=992px~<1200px 宽度为970px 宽屏设备(大桌面显示器) >=1200px 宽度为1170px - 好处
- 支持不同的屏幕，有很好的适应性
- 良好的用户体验
- 缺点：
- 大量的css代码，开发难度比较大，维护性下降
- 好处
响应式布局容器
- 响应式需要一个父级作为布局容器，来配合子级元素来实现变化效果
- 原理：在不同屏幕下，通过媒体查询来改变布局容器的大小，再改变里面子元素的排列方式和大小，从而实现不同屏幕下，看到不同的页面布局和样式变化
移动端的开发技巧
em:是css中的 相对单位。1em指的是相对父标签的font-size的取值。比如父标签的font-size为20px.那么给子标签设置1em==20px;2em==40pxrem:是css中的相对单位。rem是相对于<html>标签本身的font-size的取值。比如HTML标签的font-size为30px.即1rem等于30px。vw:相对单位。是相对于视口的宽度，即屏幕宽度。1vw==宽度的1%vh:相对单位。是相对于视口的高度，即屏幕高度。1vh==高度的1%
主要原则
- 页面本身的尺寸由百分比或vh或vw来确定
- 页面标签的尺寸和位置由
rem或百分比来确定 - 页面字体的尺寸由
rem来确定
页面开发思路
- 基本布局尽量使用弹性布局。尺寸使用百分比或rem
- 盒子尺寸用rem单位。
页面开发技巧
- 一个页面最开始可以套一个宽高都100%的div，主要防止子标签宽度不对导致页面布局混乱
- 文字或间距的尺寸一般都是在0.26~0.35rem之间
