移动端，PC端是怎么做适配的？
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了移动端，PC端是怎么做适配的？相关的知识，希望对你有一定的参考价值。
参考技术A px：像素em：一个 M 的宽度（面试：一个字的宽度）
rem：root em 根元素（ <html> ）的 font-size //oppo个别机型不适用
vh：view height，视口高度 100vh === 视口高度
vw：view width，视口宽度 100vw === 视口宽度
浏览器默认 font-size:16px;
Chrome浏览器默认最小字号为12px：font-size:12px;
所以一般情况下，rem 的font-size不要小于12px;
rem 就是 <html> 元素的 font-size，默认为 16px;(浏览器默认font-size)
rem和em 的区别：
1.meta viewport
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
2.媒体查询
更具查询结果选择不同的css样式,设置屏幕最大宽度，如果页面范围在这个宽度内就可以显示对应的CSS，以最大500为例
<style>
@media (max-width: 500px)
......
</style>
3.动态 rem方案
一切单位以屏幕宽度为标准，就能完美还原设计稿。
动态REM思路：动态rem 采用整体缩放的思想，在页面渲染之前，使用JS获取设备宽度并设置rem(1rem == html font-size == viewport width)，之后的布局单位全部使用rem来实现整体缩放。
在使用动态 rem 布局的移动端页面中，很小的宽度如border-width 依然使用px，因为即使使用rem，当rem小于1px 时，依然会被浏览器当做1px 使用。
以上是关于移动端，PC端是怎么做适配的？的主要内容，如果未能解决你的问题，请参考以下文章