傻瓜式移动端适配——媒体查询和rem

最新推荐文章于 2024-08-18 11:53:12 发布

Lioner-CSU

最新推荐文章于 2024-08-18 11:53:12 发布

阅读量629

点赞数

分类专栏：移动端适配文章标签：移动端适配 rem 兼容

本文链接：https://blog.csdn.net/qq_35630674/article/details/103049227

版权

移动端适配专栏收录该内容

1 篇文章 0 订阅

订阅专栏

一、当只有两套设计图的情况下，一套pc 一套移动端

（一般为了用户体验更好，不会只有一套设计图）

1、禁止移动端缩放，且让屏幕layout viewpoint 横向css像素=屏幕横向的dips（定值）

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

2、动态设置html的字体大小以使用rem

乘以100让1rem = 100px，而不是 1rem=0.5px 字体大小如果小于12px（谷歌浏览器最小字体，小于12的强制设为12，所以需要乘以100）计算容易出错

问题代码: 无法实时响应移动端窗口变化来更新rem，必须刷新窗口

      function setFontSize(){

          if (document.documentElement.clientWidth < 1200) {

              document.documentElement.style.fontSize = document.documentElement.clientWidth / 750 * 100 + 'px';

              //clientWidth是当前屏幕的大小 document.documentElement.style.fontSize 是html元素的字体大小 决定rem的单位大小

          }

      }

      window.onresize = setFontSize(); //调整大小时设置值一次

      window.onload = setFontSize(); //刷新时也要设置值一次

//不行事件必须是匿名函数！

解决方法：

        window.onresize = function() {

            if (document.documentElement.clientWidth < 1200) {

              document.documentElement.style.fontSize = document.documentElement.clientWidth / 750 * 100 + 'px';

            }

        };

        window.onload = function () {

            if (document.documentElement.clientWidth < 1200) {

              document.documentElement.style.fontSize = document.documentElement.clientWidth / 750 * 100 + 'px';

            }

        };

3、媒体查询动态查询屏幕大小加载不同的css模块

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

    ...css代码

} //当屏幕最大为1200px时，即屏幕小于1200px时 =>运用移动端的css方案

@media screen and (min-width:1200px){

    ...css代码

} //当屏幕最小为1200px时，即屏幕大于1200px时 =>运用pc端的css方案