css基础媒体查询和rem

https://m.suning.com/
https://m.jd.com/

rem

em 相对父元素font-size大小
rem 相对html 的font-size大小

媒体查询

有时候我们使用一个网页，调整浏览器窗口大小的时候，神奇的发现，这个页面竟然可以自动的变化，这个效果很有可能就是通过媒体实现的
@media screen and (){
.element{
}
}

如何在不同大小设备上修改不同的html字体大小呢？
@media 不同屏幕尺寸设置不同的样式

直接在chrome中写媒体查询还不生效，需要配置,为什么呢？
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
css样式重叠性，后面会覆盖前面的

媒体查询+ rem 实现元素

媒体查询一般从小到大

不同的屏幕尺寸引入不同的css文件，也就是在link上使用media

<link rel="stylesheet" href="style320.css" media="screen and (min-width:320px)">

<link rel="stylesheet" href="style640.css" media="screen and (min-width:640px)">

less

http://lesscss.org/
less：It’s CSS, with just a little more.

vscode中使用easy less插件

命令行 lessc less文件名称 生成的css文件名
变量@
运算符 + - * /
带着单位的运算， 两个都有单位，以第一个为准
less导入语法 @import “common.less”;

flexible.js
rem

核心代码

var rem = docEl.clientWidth / 10
    docEl.style.fontSize = rem + 'px'

cssrem

cssrem默认为font-size为16px，所以你需要修改下, command + ,

使用

!important让 css提权

超过750px还是使用750px