移动web开发之rem布局

rem基础

rem单位

reI can do betterm (root em)是一个相对单位，类似于em，em是父元素字体大小。

不同的是rem的基准是相对于html元素的字体大小。

比如，根元素（html）设置font-size=12px; 非根元素设置width:2rem; 则换成px表示就是24px。

/* 根html 为 12px */html {   font-size: 12px;}/* 此时 div 的字体大小就是 24px */       div {    font-size: 2rem;}

rem的优势：父元素文字大小可能不一致， 但是整个页面只有一个html，可以很好来控制整个页面的元素大小。

媒体查询

什么是媒体查询

媒体查询（Media Query）是CSS3新语法。

使用 @media查询，可以针对不同的媒体类型定义不同的样式@media 可以针对不同的屏幕尺寸设置不同的样式当你重置浏览器大小的过程中，页面也会根据浏览器的宽度和高度重新渲染页面目前针对很多苹果手机、Android手机，平板等设备都用得到多媒体查询

媒体查询语法规范

用 @media开头 注意@符号mediatype 媒体类型关键字 and not onlymedia feature 媒体特性必须有小括号包含

@media mediatype and|not|only (media feature) {    CSS-Code;}

mediatype 查询类型

​ 将不同的终端设备划分成不同的类型，称为媒体类型

关键字

​ 关键字将媒体类型或多个媒体特性连接到一起做为媒早睡有什么好处体查询的条件。

and：可以将多个媒体特性连接到一起，相当于“且”的意思。not：排除某个媒体类型，相当于“非”的意思，可以省略。only：指定某个特定的媒体类型，可以省略。

媒体特性

每种媒体类型都具体各自不同的特性，根据不同媒体类型的媒体特性设置不同的展示风格。我们暂且了解三个。

注意他们要加小括号包含

媒体查询书写规则

注意： 为了防止混乱，媒体查询我们要按照从小到大或者从大到小的顺序来写,但是我们最喜欢的还是从小到大来写，这样代码更简洁

移动端布局技术方案

1.移动端浏览器兼容问题

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

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

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

2.移动端公共样式

比格比萨加盟移动端 CSS 初始化推荐使用 normalize.css/

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

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

Normalize.css：是模块化的

Normalize.css：拥有详细的文档

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

3.rem适配方案（推荐）

1.让一些不能等比自适应的元素，达到当设备尺寸发生改变的时候，等比例适配当前设备。

2.使用媒体查询根据不同设备按比例设置html的字体大小，然后页面元素使用rem做尺寸单位，当html字体大小变化元素尺寸也会发生变化，从而达到等比缩放的适配。

手机淘宝团队出的简洁高效 移动端适配库

我们再也不需要在写不同屏幕的媒体查询，因为里面js做了处理

它的原理是把当前设备划分为10等份，但是不同设备下，比例还是一致的。

我们要做的，就是确定好我们当前设备的html天气谚语大全 文字大小就可以了

比如当前设计稿是 750px， 那么我们只需要把 html 文字大小设置为 75px(750px / 10) 就可以

里面页面元素rem值： 页面元素的1rem=75px

剩余的，让flexible.js来去算

github地址：https://github.com/amfe/lib-flexible

注意：

因为flexible是默认将屏幕分为10等分

但是当屏幕大于750的时候希望不要再去重置html字体了

所以要自己通过媒体查询设置一下

并且要把权重提到最高

推荐插件

VSCode px 转换rem 插件 cssrem

因为cssrem中css自动转化为rem是参照默认插件的16转换的所以需要自己配置

方案2：原生js设置rem布局

<script>//当窗口发生改变时 window.onresize = function () {            rem()        }        function rem() {            // rem布局，设置根单位            var screenWidth = window.innerWidth;            var danWei = screenWidth / 10;            var html = document.querySelector("html")            html.style.fontSize = danWei 母亲节的英文+ "px"        }        rem()</script>

本文地址：https://blog.csdn.net/weixin_46096473/article/details/107891943