PC端自适应

1920设计稿

app.vue

beforeCreate() {    
  var whdef = 100 / 1920 // 表示1920的设计图,使用100PX的默认值
  var wH = window.innerHeight // 当前窗口的高度
  var wW = window.innerWidth // 当前窗口的宽度
  var rem = wW * whdef // 以默认比例值乘以当前窗口宽度,得到该宽度下的相应FONT-SIZE值
  var fontSize = rem < 80 ? 80 : rem > 100 ? 100 : rem
  document.documentElement.style.fontSize = fontSize + 'px'
  window.onresize = function () {
    var whdef = 100 / 1920 // 表示1920的设计图,使用100PX的默认值
    var wH = window.innerHeight // 当前窗口的高度
    var wW = window.innerWidth // 当前窗口的宽度
    var rem = wW * whdef // 以默认比例值乘以当前窗口宽度,得到该宽度下的相应FONT-SIZE值

    var fontSize = rem < 80 ? 80 : rem > 100 ? 100 : rem
    document.documentElement.style.fontSize = fontSize + 'px'
  }
},

浏览器查看效果

1、使用F12打开控制台，切换到移动端浏览方式
2、在机型切换选项里选择edit...
3、选择Add custom device
4、填写名称、分辨率，比如1920X1080,1920,1080
5、有一个选项为Mobile，可以选择为Desktop，选不选都可以
6、之后就可以切换分辨率，查看PC不同分辨率的效果了
7、参考数值：1920X1080、1600X1200、1366X768

网站导航

网站导航