zoukankan      html  css  js  c++  java
  • 移动端页面怎么适配ios页面

    1、viewport 简单粗暴的方式:
    <meta name="viewport" content="width=320,maximum-scale=1.3,user-scalable=no">

    直接设置viewport为320px的1.3倍,将页面放大1.3倍。
    为什么是1.3?
    目前大部分页面都是以320px为基准的布局,而iphone6的宽度比是375/320 = 1.171875,iphone6+则是 414/320 = 1.29375那么以1.29倍也就约等于1.3了。
    2、ip6+ 的CSS media query
    @media (min-device-width : 375px) and (max-device-width : 667px) and (-webkit-min-device-pixel-ratio : 2){
    /*iphone 6*/
    }

    @media (min-device-width : 414px) and (max-device-width : 736px) and (-webkit-min-device-pixel-ratio : 3){
    /*iphone 6 plus*/
    }

    PS: 也可以直接使用实际的device-width:如 device-width : 375px
    在原有页面的基础上,再针对相应的屏幕大小单独写样式做适配。
    3、REM布局
    REM是CSS3新增的一种单位,并且移动端的支持度很高,android2.x+,ios5+ 都支持。REM是相对于dom结构的根元素来设置大小,也就是html这个元素。相较于em单位,rem使用上更容易理解及运用。
    REM与PX的换算可以查看网址: https://offroadcode.com/prototypes/rem-calculator/
    假设,html我们设置font-size:12px; 也就是说12px相对于1rem,那么18px也就是 18/12 = 1.5rem。
    那么我们以320px的设计布局为基准,将html设置为font-size:100px,即100px = 1rem。(设置100px是为了方便计算)那么可以将大部分px单位除以100就可以直接改成rem单位了。
    REM如何做响应式布局
    1、如果仅仅是适配ip6+设备,那么使用media query就行。
    伪代码如下:
    /*320px布局*/
    html{font-size: 100px;}
    body{font-size: 0.14rem /*实际相当于14px*/}

    /* iphone 6 */
    @media (min-device-width : 375px) and (max-device-width : 667px) and (-webkit-min-device-pixel-ratio : 2){
    html{font-size: 117.1875px;}
    }
    /* iphone6 plus */
    @media (min-device-width : 414px) and (max-device-width : 736px) and (-webkit-min-device-pixel-ratio : 3){
    html{font-size: 129.375px;}
    }

    这样,在ip6下,也就将页面内的元素放大了1.17倍,ip6+下也就是放大了1.29倍。
    2、如果是完全自适应,那么可以通过JS来控制。
    (function (doc, win) {
    var docEl = doc.documentElement,
    resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
    recalc = function () {
    var clientWidth = docEl.clientWidth;
    if (!clientWidth) return;
    docEl.style.fontSize = 100 * (clientWidth / 320) + 'px';
    };

    // Abort if browser does not support addEventListener
    if (!doc.addEventListener) return;
    win.addEventListener(resizeEvt, recalc, false);
    doc.addEventListener('DOMContentLoaded', recalc, false);
    })(document, window);

    页面初始化的时候计算font-size,然后再绑定resize事件。这种效果就和百分比布局一样了。

    原链接:https://zhidao.baidu.com/question/435513467716368724.html

    注意写法:
    错误的没带空格就不生效:
    @media(min-device-375px)and(max-device-667px)and(-webkit-min-device-pixel-ratio:2){body{font-size:16px;}}

    改成之后要带空格才生效:

    @media (min-device-width : 375px) and (max-device-width : 667px) and (-webkit-min-device-pixel-ratio : 2){body{font-size:16px;}}
  • 相关阅读:
    城市的划入划出效果
    文本溢出省略解决笔记css
    长串英文数字强制折行解决办法css
    Poj 2352 Star
    树状数组(Binary Indexed Trees,二分索引树)
    二叉树的层次遍历
    Uva 107 The Cat in the Hat
    Uva 10336 Rank the Languages
    Uva 536 Tree Recovery
    Uva10701 Pre, in and post
  • 原文地址:https://www.cnblogs.com/huanghuali/p/7797701.html
Copyright © 2011-2022 走看看