移动端响应式布局基础

搭建一个H5页面,我们需要在head中添加一个meta标签

快捷键:meta:vp + tab键

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

viewport:视口

width=device - width 设置视口的宽度等于设备的宽度,如果不设置的话,默认视口宽度为980px。通俗的理解:我们这个操作其实就是告诉当前的浏览器按照多少宽度来渲染页面,换句话说,就是展示当前这个页面的区域一共有多宽(浏览器的宽度)

user-scalable=no 禁止用户手动缩放

initial-scale=1.0 设置屏幕默认的缩放比例

maximum-scale=1.0 设置屏幕最大的缩放比例

minimum-scale=2.0 设置屏幕最小的缩放比例





/*正常普通屏*/
        .box {
            background: url("ban.jpg") no-repeat;
        }

        /*2倍屏*/
        @media all and (-webkit-device-pixel-ratio: 2) {
            .box {
                background: url("ban@2x.jpg") no-repeat;
            }
        }

        /*3倍屏*/
        @media all and (-webkit-device-pixel-ratio: 3) {
            .box {
                background: url("ban@3x.jpg") no-repeat;
            }
        }


媒体查询:@media

->媒体设备:all所有设备  screen所有屏幕设备PC+移动端 print打印机设备...

->媒体条件:指定在 什么样的条件下执行对应的样式

        @media all and (max-width: 319px) {
            /*宽度小于320px*/
            .box {
                height: 110px;
            }
        }

        @media all and (min-width: 320px) and (max-width: 359px) {
            /*宽度大于等于320px小于360px*/
            .box {
                height: 120px;
            }
        }


苹果手机的尺寸:5s以下都是320px  6是375px宽度 6plus是414px

常用的安卓机尺寸:320, 360, 480, 540, (640, 720...)

在真实项目中,设计师给我们的设计稿一般都是640*1136  /  640*960  /   750*1334

响应式布局的解决方案:

①流式布局法:

->一般是用在PC端和手机端共用一套前端页面

->容器的宽度一般都不写固定的值,而是使用百分比(相对于视口区域宽度的百分比)

->其余的样式:字体,高度,margin,padding等等都按照设计稿上标注尺寸的一半来设置

->对于有些屏幕尺寸下,我们设置的固定值看起来不是特别好看的话,使用@media进行微调整


特殊情况:

设计师的设计稿是640px的,我们的素材图也是640px,这样iPhone6以及6plus展示的时候,图片不够大,对于这种情况就和UI设计师要1280px大图

        @media all and (-webkit-min-device-pixel-ratio: 2) and (min-width: 320px) {
            .box {
                background: url("ban@big.jpg") no-repeat;
            }
        }

        @media all and (min-width: 641px) {
            .box {
                background: url("ban@big.jpg") no-repeat;
            }
        }


②REM响应式布局

->我们做的H5页面只在移动端访问(REM不兼容低版本的浏览器)

->REM:当前页面中元素的REM单位的样式值都是针对于HTML元素的font-size的值进行动态计算的

->  html{

font-size: 100px;   //1REM = 100px

}

Width: 2rem; 这样就是相当于width=200px

Height:2rem;

按照平时如果想要让页面中的所有比例所有一半,就需要修改所有的单位为px的值,而采用rem的话,只需要改变font-size: 50px;

这样就代表1REM = 50px,所以

Width: 2rem; 这样就是相当于width=100px

Height:2rem;


步骤:

①从UI设计师拿到设计稿(PSD格式的设计稿)640*1136

②在样式中给HTML设定一个font-size的值,我们一般都设置一个方便后面计算的值,例如:10px,100px...这里我们之所以用100px,主要是浏览器最小的字体大小都是12px,用10px比例计算的结果和真实UI设计稿会存在那么一点点的偏差

html{

font-size: 100px;   //1REM = 100px

}

③写页面,写样式

完全按照设计稿的尺寸来写样式,此时不用管任何的事情,设计稿给你的高度,宽度,字体大小,margin,padding的值是多少,我们就写多少

但是我们在写样式值的时候,需要把得到的像素值除以100,计算出对应的rem的值,我们设定的也都是rem的值

值得注意的是:真实项目中外层盒子的宽度我们一般还是不写固定值,沿用流式布局法的思想,我们用百分比的方式布局

④根据当前屏幕的宽度和设计稿的宽度来计算我们HTML的font-size

设计稿   640   600*300                      font-size=100             6rem*3rem

手机:   320    300*150                     font-size=50               6rem*3rem

手机:   375  351.5625*175.78125    font-size=58.59375    6rem*3rem



根据当前的屏幕宽度和设计稿宽度的比例,动态计算一下当前宽度下的fontsize值应该是多少,如果fontsize的值改变了,之前设定的所有rem单位的值自动会跟着放大或者缩小

~function () {
    var desW = 640,
        winW = document.documentElement.clientWidth,
        ratio = winW / desW,
        oMain = document.querySelector(".main");
    if (winW > desW) {
        oMain.style.margin = "0 auto";
        oMain.style.width = desW + 'px';
        return;
    }
    document.documentElement.style.fontSize = ratio * 100 + 'px';
}();




评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值