Rem 布局方式

flexible.png

1.设置meta标签

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

2.初始化style

    <style>
        /* 如果屏幕超过了750px,那么我们就就按照750px设计稿来走,不会让页面超过750px ,使用媒体查询来设置*/
        @media screen and (min-width: 750px) {
            html {
                font-size: 75px !important;
            }
        }

        body {
            min-width: 320px;
            max-width: 750px;
            /* flexible.js把设计稿750px进行10等分,所以html文字大小设置为75px(750px/ 10),页面元素rem值:页面元素的px值/ 75(750px/75)*/
            width: 10rem;
            margin: 0 auto;
        }
    </style>

3.引入flexible.js

<script src='js/flexible.js'></script>

4.如果设计稿为750px 在vsCode安装cssrem自动计算插件再把vsCode的cssRoot设置为75(因为flexible划分了10等分)

image.png

@media 媒体类型and (媒体特性){你的样式}
1. 最大宽度max-width:其意思是指媒体类型小于或等于指定的宽度时
2.最小宽度min-width:其意思是指媒体类型大于或等于指定的宽度时
3..媒体查询一般是从小到大或者从小到大的顺序来的
 /* 小于540px 为蓝色 */
    @media screen and (max-width:539px){
      body{
        background-color: blue;
      } 
    }
    /* 540~970 页面为红色 */
    @media screen and (min-width:540px) and (max-width:969px){
      body{
        background-color: red;
      }
    }
    /* 大于970px为绿色*/
    @media screen and (min-width:970px){
      body{
        background-color: green;
      }
    }

1. rem相对于html元素字体大小来说

rem.png
计算公式
计算公式.png
1、新建common.less,设置好最常见的屏幕尺寸,利用媒体查询设置不同的html字体大小
2、常用尺寸有:320px、360px、375px、384px、400px、414px、424px、480px、540px、720px、750px
3、确定将页面划分为多少份。例:15份
4、由于PC端也可以打开移动端首页,默认html大小为750/15=50px,注意由于代码的层叠性需要将其写在最上面
// 普通页面打开 注意:由于页面的层叠性 需将其写在最前面
html{
    font-size:50px;
}
// 设置将页面划分的份数
@num:15;
// 设置常见的屏幕尺寸 修改html文字大小,为了代码更简洁,建议从小到大来写
@media screen and (min-width:320px){
    html{
        font-size: 320px / @num;
    }
}
@media screen and (min-width:360px){
    html{
        font-size: 360px / @num;
    }
}
@media screen and (min-width:375px){
    html{
        font-size: 375px / @num;
    }
}
@media screen and (min-width:384px){
    html{
        font-size: 384px / @num;
    }
}
@media screen and (min-width:400px){
    html{
        font-size: 400px / @num;
    }
}
@media screen and (min-width:414px){
    html{
        font-size: 414px / @num;
    }
}
@media screen and (min-width:424px){
    html{
        font-size: 424px / @num;
    }
}
@media screen and (min-width:480px){
    html{
        font-size: 480px / @num;
    }
}
@media screen and (min-width:540px){
    html{
        font-size: 540px / @num;
    }
}
@media screen and (min-width:720px){
    html{
        font-size: 720px / @num;
    }
}
@media screen and (min-width:750px){
    html{
        font-size: 750px / @num;
    }
}

在less文件用@import导入

image.png

使用flexible.js 做适配

image.png
  • 划分了10等分不需要自己计算写媒体查询
image.png
直接引入js在750设计稿就可以直接
image.png

在写超过750px屏幕大小的时候 用媒体查询设置最高权重

image.png

flexible源码:

(function flexible(window, document) {

    var docEl = document.documentElement;

    var dpr = window.devicePixelRatio || 1;

    // adjust body font size

    function setBodyFontSize() {

        if (document.body) {

            document.body.style.fontSize = 12 * dpr + "px";

        } else {

            document.addEventListener("DOMContentLoaded", setBodyFontSize);

        }

    }

    setBodyFontSize();

    // set 1rem = viewWidth / 10

    function setRemUnit() {

        //将屏幕分成10等份 750px的界面1rem=75px

        var rem = docEl.clientWidth / 10;

        docEl.style.fontSize = rem + "px";

    }

    setRemUnit();

    // reset rem unit on page resize

    window.addEventListener("resize", setRemUnit);

    window.addEventListener("pageshow", function(e) {

        if (e.persisted) {

            setRemUnit();

        }

    });

    // detect 0.5px supports

    if (dpr >= 2) {

        var fakeBody = document.createElement("body");

        var testElement = document.createElement("div");

        testElement.style.border = ".5px solid transparent";

        fakeBody.appendChild(testElement);

        docEl.appendChild(fakeBody);

        if (testElement.offsetHeight === 1) {

            docEl.classList.add("hairlines");

        }

        docEl.removeChild(fakeBody);

    }

})(window, document);

推荐阅读更多精彩内容

  • 思路 1,先判断手机号和验证是否为空, 2,点击发送验证码,1分钟计时,得到验证码 3,输入的验证码是否为空和是否...
    兰觅阅读 340评论 0 1
  • 常见使用场景可以分为三类: 父子通信: 父向子传递数据是通过 props,子向父是通过 events($emit)...
    抽疯的稻草绳阅读 195评论 0 0
  • 从效果图中可以看出,覆盖了App中常用的按钮效果,弧度、按压效果、标签选择、按钮渐变色等。如果用shape.xml...
    遇见编程阅读 1,606评论 2 31
  • 1.引入弹幕插件: 2.vue中引入: 3.组件中使用: 示例代码: 4.效果截图: 5.说明: github文档...
    JuMinggniMuJ阅读 362评论 1 1
  • 最近在做微信小程序优惠券的一个需求,然后优惠券卡片展示是不规则图形且含阴影。 如下: 因为卡片有展开交互,所以高度...
    越前君阅读 178评论 0 3