移动端布局

rem布局

概念

rem是css中的一个相对长度单位，它以根元素<html>的font-size值为基准，例如：

html的font-size为16px，1rem就等于16px。

大多数用于自适应布局，不过需要写算法让其根据屏幕的宽度进行自动计算。

https://www.linkkap.com/open in new window

rem的算法

为了方便计算一般都把宽度为750px的设备的font-size设为100px，相当于把屏幕切成了7.5份，可以根据这个标准来写算法。

function() {
	let width = document.documentElement.clientWidth 
				|| document.body.clientWidth
    if (width >= 600) {
		width = 600
    }
	document.documentElement.style.fontSize = width / 7.5 + 'px'
}

配合插件

可以去vscode使用px2rem插件，在里面设置html中font-size的值即可转换。

响应式布局

概念

采用自适应布局和流式布局的综合方式，为不同屏幕分辨率范围创建流式布局。

这种设计方法一般是利用媒体查询进行，优点是多端浏览时样式好看，缺点就是维护麻烦。

媒体查询

可以根据各种设备特征和参数的值或者是否存在来调整您的网站或应用。

@media 媒体类型逻辑操作符* (媒体特性)* { ...css内容... }

媒体类型(逻辑操作符不是not或only则是可选的，默认为all)：

all：适用所有设备。
print：适用于在打印预览模式下在屏幕上查看的分页材料和文档。
screen：主要用于屏幕。
speech：主要用于语音合成器。

逻辑操作符：

and ：将媒体特性与媒体类型或其他媒体特性组合在一起，可以把其当成并(&&)。
not：不满足媒体特性时生效，对媒体类型和第一个and不生效，使用必须指定媒体类型且只能出现一次，可以把其当成非(!)。
, ：其后相当于重写一个@media语句，可以把其当成或(||)。
only：可防止旧版浏览器应用指定的样式，这些浏览器不支持带媒体特性的媒体查询。

媒体特性：

width：精确宽度。
min-width：最小宽度。
max-width：最大宽度。
height：精确高度。
min-height：最小高度。
max-height：最大高度。

使用<style>写媒体查询时要注意顺序问题，后面的同级别样式会覆盖前面的样式。

注意media还可以在<style>, <link>, <source>中使用。

# 移动端布局

# rem布局

# 概念

# rem的算法

# 配合插件

# 响应式布局