前端页面实现自适应

pc端

1.用js计算

1rem = html之font-size
根据设计图 1366宽 html设置100px 100px的元素==1rem
比如实际浏览器 2732 宽 同样设置1rem ，那根元素要设置多少，使俩者比例一致
1366:100=2732:x
得x=200
html设置font-size=200px 而其他元素设置的rem不用变化

var deviceWidth（不考虑兼容性可使用vw,vh获取视图窗口viewport宽高）
setHtmlFontSize()

if (window.addEventListener) {
  window.addEventListener('resize', function () {
      setHtmlFontSize()
  }, false)
}
function setHtmlFontSize () {
  // 1366是设计稿的宽度，当大于1366时采用1366宽度，比例也是除以13.66
    deviceWidth = document.documentElement.clientWidth > 1366 ? 1366 : document.documentElement.clientWidth
    document.getElementsByTagName('html')[0].style.cssText = 'font-size:' + deviceWidth / 13.66 + 'px !important'
}

每个单位大小用实际值除以100得到相对的rem值。

2. media query，多媒体查询模块

用法和上面相同

1.当需要pc端和移动端不同布局，需要media自动探测屏幕宽度，然后加载相应的CSS文件（实现响应式布局）

示例：<link rel="stylesheet" type="text/css"  media="screen and (max-device-width: 400px)" href="style.css" />，当屏幕小于400时，就加载style.css这个文件 

2. 除了使用html标签加载CSS文件，还可以在现有CSS文件中加载

示例：@import url("style2.css") screen and (max-device-width: 800px)，当小于800px屏幕时，就加载style2.css文件

3.????除了使用html标签和css文件加载css文件，还可以直接在css通过@media来添加css样式代码

示例：@media screen and (max-width: 960px){　　body{background: #000;　　}

4.：图片的自动缩放，比较简单。只需要一行CSS代码：

img{ max-width: 100%;}，建议根据不同的屏幕分辨率，加载不同大小像素的图片

移动端

比如设计图375px

html{
    font-size:calc(100vh / 3.75)
}
每个单位大小用实际值除以100得到相对的rem值。