网页自适应方案

一、自适应

1.统一视口

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">

 2.动态font-size

  function resetHtmlFont() {
    // 获取html对象并动态设置font-size = 设备宽度 / 10
    document.documentElement.style.fontSize = screen.width / 10 + 'px'
  }
  resetHtmlFont()
  // 如果窗口大小变化了，则重新计算font-size
  window.onresize = resetHtmlFont

以750px设计稿为例，font-size则为75px，1rem也为75px

3.px与rem转换

安装插件

px to rem & rpx & vw (cssrem)

扩展配置设置基础的font-size

二、移动端特定布局

利用媒体监听，设置不同的css样式，移动端以750px分界

一套html，两套css

@media screen and (max-width:750px){


}