css--移动端

媒体查询@media

    1.通过媒体查询
     媒体查询主要是通过查询设备的宽度来执行不同的css代码，最终达到界面的配置

     2.媒体查询优势
     简单, 哪里不对改哪里
     调整屏幕宽度的时候不用刷新页面即可响应式展示
     特别适合对移动端和PC维护同一套代码的时候

     3.媒体查询劣势
     由于移动端和PC端维护同一套代码, 所以代码量比较大，维护不方便
     为了兼顾大屏幕或高清设备，会造成其他设备资源浪费，特别是加载图片资源
     为了兼顾移动端和PC端各自响应式的展示效果，难免会损失各自特有的交互方式

     4.应用场景
     对于比较简单(界面不复杂)的网页, 诸如: 企业官网、宣传单页等
     我们可以通过媒体查询、伸缩布局、Bootstrap来实现响应式站点

     对于比较复杂(界面复杂)的网页, 诸如: 电商、团购等
     更多的则是才是PC端一套代码, 移动端一套代码

实现PC端一套代码，移动端一套代码

电商网站的PC端https://www.taobao.com/
移动端https://main.m.taobao.com/?sprefer=sypc00

实现步骤:
    1.默认打开PC端界面
    2.在PC端界面中通过BOM拿到当前浏览器信息
    3.通过正则判断当前浏览器是否是移动端浏览器
    4.通过BOM的location对象实现跳转到移动端界面
    //使用正则判断navigator.userAgent中当前是PC端还是安卓或者ios手机端
    //移动端返回fasle 否则返回true
    //移动端通过location.href 跳转到移动端对应的页面
    function isPc() {
        let userAgentInfo = navigator.userAgent;
        if(/iphone/i.test(userAgentInfo)){
            return false;
        }else if(/android/i.test(userAgentInfo)){
            return false;
        }
        return true;
    }
    if(!isPc()){
        location.href = "http://m.jd.com";
    }

等比缩放 + rem

    1.针对移动端不同尺寸的屏幕，也需要进行适配
    例如:
    iPhone3/4/5:  320px
    iPhone678:    375px
    iPhoneX/plus: 414px

    当下在企业开发中设计师提供给我们的移动端设计图片是750*xxx的或者1125*xxx的
    所以我们需要对设计师提供的图片进行等比缩放, 这样才能1:1还原设计图片
    
    2.如何等比缩放?
    2.1将设计图片等分为指定份数,求出每一份的大小
       例如: 750设计图片分为7.5份, 那么每一份的大小就是100px
    2.2将目标屏幕也等分为指定份数,求出每一份的大小
       例如: 375屏幕也分为7.5份, 那么每一份的大小就是50px

    2.3用 原始元素尺寸 / 原始图片每一份大小 * 目标屏幕每一份大小 = 等比缩放后的尺寸
       例如: 设计图片上有一个150*150的图片, 我想等比缩放显示到375屏幕上
       那么: 150 / 100 * 50 = 1.5*50 = 75px

    3.如何在前端开发中应用这个计算公式?
    3.1目标屏幕每一份的大小就是html的font-size: 50px
    3.2使用时只需要用 "原始元素尺寸 / 原始图片每一份大小rem" 即可
                      150 / 100 = 1.5 / 1.5rem
                      1rem = 50px  / 1.5rem === 1.5*50 = 75px
   4.通过JS动态计算当前屏幕每一份大小的好处: 不用写很多的媒体查询
                坏处: 切换了屏幕尺寸之后需要刷新界面才有效
                      而媒体查询如果切换了屏幕的尺寸不需要重新刷新界面
   document.documentElement.style.fontSize = window.innerWidth / 7.5 + "px";//设置根元素的rem 
   注意：原生js不支持对像素值进行计算，需要使用less

解决设备像素和CSS像素不一样的问题
获取设备像素比DPR(Device Pixel Ratio)
DPR = 设备像素 / CSS像素
iPhone3GS : 320 / 320 = 1
iPhone4S: 640 / 320 = 2
iPhone678: 750 / 375 = 2
iPhoneX: 1125 / 375 = 3
在JS中通过 window.devicePixelRatio 获取当前的设备像素
通过的initial-scale属性来缩小

完整的移动端适配方案

        let scale = 1.0 / window.devicePixelRatio;
        let text = `<meta name="viewport" content="width=device-width, initial-scale=${scale}, maximum-scale=${scale}, minimum-scale=${scale}, user-scalable=no">`;
        document.write(text);
        document.documentElement.style.fontSize = window.innerWidth / 7.5 + "px";

jiaody111

发布了133 篇原创文章 · 获赞 1 · 访问量 5430

私信关注

完整的移动端适配方案

猜你喜欢