CSS怎么进行移动端适配

meta viewport

viewport也就是说，表示当前可见的计算机图形区域的视区通常与浏览器窗口相同。

如何在移动端配置视窗 ？ =》 meta 标签

上述的meta这个环境是我们理想的环境。他规定我们的视窗宽度是屏幕宽度，初始比例是1，禁止用户手动伸缩。

CSS长度单位

1. px
px即相对于显示器的屏幕分辨率的像素。

2. em

• em的值不是固定的，具体取决于使用它的元素的大小。
• em继承 父级元素 字体大小
• 任何浏览器的默认字体都是16px

3. rem

• rem是CSS3添加的单位，相关元素为 html根元素(html) ，缺省值也是16px
• 通过它，所有字体大小都可以从左到只有根元素按比例调整，避免了字体大小逐层复合的连锁反应。
• 区别em是基于继承相应大小的父元素而不是固定的，rem是继承html根元素的大小
• 仅更改根元素html的 fonst-size 才能改变rem的值

rem适配

//假设我设置了根元素的大小。14px
html{
    font-size：14px
}
//所以我到底在想什么p如果你想要标签，它也是14像素
p{
    font-size:1rem
}

rem的布局 不得不提flexible，flexible该解决方案是针对阿里的早期开源移动适配解决方案，引用flexible之后，我们在页面上统一使用它。rem来布局。

他的原则很简单

// set 1rem = viewWidth / 10

function setRemUnit () {
    var rem = docEl.clientWidth / 10
    docEl.style.fontSize = rem + px
}
setRemUnit();

rem 是相对于html节点的font-size来进行计算。因此，为页面开头的根元素设置1。font-size，下一个元素基于rem这确保了布局在页面大小更改时是自适应的。

另一种写法是：

@media 媒体查询

媒体查询可以根据屏幕大小而有所不同。,动态适应,语法为 @margin (条件) {}

 @media (max-width: 700px) {
    border: 1px solid red;
 }

中的屏幕宽度700px在遵循时，请执行相应的CSS风格修改。