【媒体查询】移动端rem比例设置

Shaw Jie�

已于 2022-11-28 14:11:02 修改

阅读量634

点赞数 1

文章标签：媒体 javascript 前端 vue

于 2022-10-08 09:52:16 首次发布

本文链接：https://blog.csdn.net/Shaw_Jie/article/details/127203182

版权

当下大多移动端布局，都是依照iphone6/7/8设备尺寸进行开发的，开发时可以借助媒体查询，实现响应布局。

/* 设置默认rem的字体大小  1rem=10*/
html,body{
    font-size: 10px !important;
}

/* 手机上的标准 iphone6的设计标准  750*1334 测试实在电脑上边看的 
    rem单位只和设备的宽度有关系
    电脑上边是375*667
*/

/* iphone6/7/8   1rem=10px  写网页时候  如果字体是14px=1.4rem，
如果盒子的宽度是100px=10rem*/
@media screen and (min-width:375px){
    html,body{
        font-size: 10px !important;
    }
}

/* iphone6/7/8 plus   1rem=11.04px*/
@media screen and (min-width:414px){
    /* 10*414/375=11.04 */
    html,body{
        font-size: 11.04px !important;
    }
}

/* ipad  1rem=20.48px*/
@media screen and (min-width:768px){
    /* 10*768/375=20.48 */
    html,body{
        font-size: 20.48px !important;
    }
}

/* 移动端如何兼容不同的移动设备 */

/* rem来兼容不同的移动设备 */

/* rem相对单位相对的是根字体的大小根就是html */

/* px 绝对单位 */

/* em 相对单位相对于父级 */

/* 移动端的设计规范 */

/* 现在主流的app都是按照微信这个app来进行适配微信是根据iphoe6的大小来进行设计 */

/* ipone6分辨率 1334*750 */

/* 在pc浏览器中 667*375 */

/* 移动端布局用弹性盒子 */