成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

移動(dòng)屏幕適配

dreamGong / 3480人閱讀

摘要：簡(jiǎn)介移動(dòng)屏幕適配是一個(gè)比較令人頭疼的問(wèn)題，這是我寫的一個(gè)通過(guò)動(dòng)態(tài)設(shè)置的移動(dòng)屏幕適配的工具函數(shù)，包括定寬和兩種適配方法，目前在我自己的項(xiàng)目中用起來(lái)還不錯(cuò)，后續(xù)也會(huì)優(yōu)化調(diào)整，地址這里。

2015-10-16更新。

簡(jiǎn)介

移動(dòng)屏幕適配是一個(gè)比較令人頭疼的問(wèn)題，這是我寫的一個(gè)通過(guò)動(dòng)態(tài)設(shè)置viewport的移動(dòng)屏幕適配的工具函數(shù)，包括定寬和rem兩種適配方法，目前在我自己的項(xiàng)目中用起來(lái)還不錯(cuò)，后續(xù)也會(huì)優(yōu)化調(diào)整，github地址這里。

說(shuō)明

頁(yè)面事先添加meta標(biāo)簽 ，然后調(diào)用方法如fixViewport("fixed", 640)即可。

參數(shù)

type
適配類型(可選值為"fixed"或"rem")

width
設(shè)計(jì)稿寬度(整數(shù))

適配方法

可以選擇以下兩種方式進(jìn)行屏幕適配：

定寬：
原理：設(shè)定viewport的寬度為固定值(即傳遞的width值)，并根據(jù)屏幕寬度和width值計(jì)算viewport縮放比例。
實(shí)際開(kāi)發(fā)在css中任何長(zhǎng)度尺寸均使用px單位，大小設(shè)置為設(shè)計(jì)稿中原始尺寸值；
字體單位使用em, body下直接子元素字體大小設(shè)置為設(shè)計(jì)稿中尺寸值 / 100；
非直接子元素若其父元素未設(shè)置字體大小則與直接子元素相同，否則根據(jù)父元素字體大小計(jì)算其相對(duì)值。

rem:
原理：根據(jù)設(shè)備dpr和屏幕寬度來(lái)計(jì)算viewport寬度，并根據(jù)設(shè)備dpr計(jì)算viewport縮放比例，然后在html標(biāo)簽中設(shè)置font-size的屬性值。
實(shí)際開(kāi)發(fā)在css中任何長(zhǎng)度尺寸均使用rem單位，大小設(shè)置為設(shè)計(jì)稿中尺寸值 / 100;
字體單位使用em, body下直接子元素字體大小設(shè)置為設(shè)計(jì)稿中尺寸值 / 100；
非直接子元素若其父元素未設(shè)置字體大小則與直接子元素相同，否則根據(jù)父元素字體大小計(jì)算其相對(duì)值。
若需要1px物理像素的邊框效果，則border的寬度不需要使用rem，設(shè)定為1px即可。

代碼 
/**
 * Created by GG on 15/7/29.
 *
 *  頁(yè)面事先添加meta標(biāo)簽 
 *  參數(shù)：type(適配類型, 可選值為"fixed"或"rem")；width(設(shè)計(jì)稿寬度，整數(shù))
 *  可以選擇以下兩種情況適配：
 *  1. 定寬：原理是設(shè)定viewport的寬度為固定值(即傳遞的width值)，并根據(jù)屏幕寬度和width值計(jì)算viewport縮放比例。
 *     實(shí)際開(kāi)發(fā)在css中任何長(zhǎng)度尺寸均使用px單位，大小設(shè)置為設(shè)計(jì)稿中原始尺寸值；
 *     字體單位使用em, body下直接子元素字體大小設(shè)置為設(shè)計(jì)稿中尺寸值 / 100；
 *     非直接子元素若其父元素未設(shè)置字體大小則與直接子元素相同，否則根據(jù)父元素字體大小計(jì)算其相對(duì)值。
 *  2. REM：原理是根據(jù)設(shè)備dpr和屏幕寬度來(lái)計(jì)算viewport寬度，并根據(jù)設(shè)備dpr計(jì)算viewport縮放比例，然后在html標(biāo)簽中設(shè)置font-size的屬性值。
 *     實(shí)際開(kāi)發(fā)在css中任何長(zhǎng)度尺寸均使用rem單位，大小設(shè)置為設(shè)計(jì)稿中尺寸值 / 100;
 *     字體單位使用em, body下直接子元素字體大小設(shè)置為設(shè)計(jì)稿中尺寸值 / 100；
 *     非直接子元素若其父元素未設(shè)置字體大小則與直接子元素相同，否則根據(jù)父元素字體大小計(jì)算其相對(duì)值。
 *     若需要1px物理像素的邊框效果，則border的寬度不需要使用rem，設(shè)定為1px即可。
 */

(function () {
    function fixViewport(type, designWidth) {
        var metaEl = document.querySelector("meta[name="viewport"]");
        //由于初始設(shè)置了viewport的width=device-width,所以此處docEl.clientWidth即是屏幕的設(shè)備寬度
        var clientWidth = document.documentElement.clientWidth;
        var width, scale;

        switch (type) {
            case "fixed":
                width = designWidth;
                scale = clientWidth / designWidth;
                break;
            case "rem":
                var dpr = window.devicePixelRatio || 1;
                width = clientWidth * dpr;
                scale = 1 / dpr;
                document.documentElement.style.fontSize = 100 * (clientWidth * dpr / designWidth) + "px";
                break;
        }
        metaEl.setAttribute("content", "width=" + width + ",initial-scale=" + scale + ",maximum-scale=" + scale +
            ",minimum-scale=" + scale);

        //設(shè)置body的基準(zhǔn)字體大小
        document.body.style.fontSize = 50 / scale + "px";
    }

    fixViewport("rem", 640);
}());

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/85827.html

相關(guān)文章

  • 【移動(dòng)適配】移動(dòng)Web怎么做屏幕適配（一）

    摘要：屏幕適配是一個(gè)很容易被忽略的問(wèn)題，但對(duì)于精益求精的產(chǎn)品而言，是必不可少的。對(duì)于開(kāi)發(fā)的求職者而言，也是一個(gè)必需要理解清楚的經(jīng)典問(wèn)題文啃先生壹移動(dòng)端適配的是什么我們討論的是網(wǎng)頁(yè)適配多種尺寸屏幕，讓網(wǎng)頁(yè)效果看起來(lái)和設(shè)計(jì)師的設(shè)計(jì)稿一樣。 屏幕適配是一個(gè)很容易被忽略的問(wèn)題，但對(duì)于精益求精的產(chǎn)品而言，是必不可少的。對(duì)于Web開(kāi)發(fā)的求職者而言，也是一個(gè)必需要理解清楚的經(jīng)典問(wèn)題 文 | 啃先生 Mar...

    huangjinnan 評(píng)論0 收藏0

  • 從零搭建移動(dòng)H5開(kāi)發(fā)項(xiàng)目實(shí)戰(zhàn)

    摘要：并且除了常用的端，還要考慮微信端，或者是端。所以我們要有一套機(jī)制，在端上走的代碼，在端或者微信端上走端對(duì)應(yīng)的代碼。對(duì)于一個(gè)從零開(kāi)始的移動(dòng)端項(xiàng)目，我總結(jié)了以上這些移動(dòng)開(kāi)發(fā)難點(diǎn)，希望之后的人能少踩點(diǎn)坑，站在我的肩膀上提高項(xiàng)目開(kāi)發(fā)的效率和質(zhì)量。 從零搭建移動(dòng)H5開(kāi)發(fā)項(xiàng)目實(shí)戰(zhàn) 前端H5的前世今身 在Pc的時(shí)代，前端技術(shù)無(wú)疑統(tǒng)治了大多數(shù)用戶的交互界面！而在移動(dòng)為王的今天，NA開(kāi)發(fā)在早期占領(lǐng)了大多...

    terro 評(píng)論0 收藏0

  • 從零搭建移動(dòng)H5開(kāi)發(fā)項(xiàng)目實(shí)戰(zhàn)

    摘要：并且除了常用的端，還要考慮微信端，或者是端。所以我們要有一套機(jī)制，在端上走的代碼，在端或者微信端上走端對(duì)應(yīng)的代碼。對(duì)于一個(gè)從零開(kāi)始的移動(dòng)端項(xiàng)目，我總結(jié)了以上這些移動(dòng)開(kāi)發(fā)難點(diǎn)，希望之后的人能少踩點(diǎn)坑，站在我的肩膀上提高項(xiàng)目開(kāi)發(fā)的效率和質(zhì)量。 從零搭建移動(dòng)H5開(kāi)發(fā)項(xiàng)目實(shí)戰(zhàn) 前端H5的前世今身 在Pc的時(shí)代，前端技術(shù)無(wú)疑統(tǒng)治了大多數(shù)用戶的交互界面！而在移動(dòng)為王的今天，NA開(kāi)發(fā)在早期占領(lǐng)了大多...

    pepperwang 評(píng)論0 收藏0

  • 移動(dòng) web 端屏幕適配 - rem

    摘要：前言最近整理了一下以前學(xué)習(xí)前端的筆記，發(fā)現(xiàn)自己對(duì)移動(dòng)端屏幕適配這一塊并沒(méi)有真正理解，只是會(huì)用。接下來(lái)，把自己的一些對(duì)移動(dòng)端屏幕適配的思考記錄下來(lái)。量得的高度為，因?yàn)樵谠O(shè)計(jì)稿這樣尺寸的屏幕中，，所以該的的值為，即。 前言 最近整理了一下以前學(xué)習(xí)前端的筆記，發(fā)現(xiàn)自己對(duì)移動(dòng) web 端屏幕適配（rem）這一塊并沒(méi)有真正理解，只是會(huì)用。接下來(lái)，把自己的一些對(duì)移動(dòng) web 端屏幕適配（rem）的...

    Xufc 評(píng)論0 收藏0

  • 移動(dòng) web 端屏幕適配 - rem

    摘要：前言最近整理了一下以前學(xué)習(xí)前端的筆記，發(fā)現(xiàn)自己對(duì)移動(dòng)端屏幕適配這一塊并沒(méi)有真正理解，只是會(huì)用。接下來(lái)，把自己的一些對(duì)移動(dòng)端屏幕適配的思考記錄下來(lái)。量得的高度為，因?yàn)樵谠O(shè)計(jì)稿這樣尺寸的屏幕中，，所以該的的值為，即。 前言 最近整理了一下以前學(xué)習(xí)前端的筆記，發(fā)現(xiàn)自己對(duì)移動(dòng) web 端屏幕適配（rem）這一塊并沒(méi)有真正理解，只是會(huì)用。接下來(lái)，把自己的一些對(duì)移動(dòng) web 端屏幕適配（rem）的...

    RdouTyping 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<