2. 程式人生 > >利用rem實現響應式佈局

利用rem實現響應式佈局

阿新 • • 發佈：2018-12-23 
<head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0">
        <meta name="apple-mobile-web-app-capable"
 
 content="yes">
        <!--<meta name="apple-mobile-web-app-status-bar-style" content="black">-->
        <meta name="format-detection" content="telephone=no">
        <title></title>
        <link rel="stylesheet" type="text/css" href="css/channel.css" />
        <script
 
 type="text/javascript">
            (function(designWidth, maxWidth) {
                var doc = document,
                    win = window,
                    docEl = doc.documentElement,
                    remStyle = document.createElement("style"),
                    tid;

                function
 
 refreshRem() {
                    var width = docEl.getBoundingClientRect().width;
                    maxWidth = maxWidth || 540;
                    width > maxWidth && (width = maxWidth);
                    var rem = width * 100 / designWidth;
                    remStyle.innerHTML = 'html{font-size:' + rem + 'px;}';
                }

                if(docEl.firstElementChild) {
                    docEl.firstElementChild.appendChild(remStyle);
                } else {
                    var wrap = doc.createElement("div");
                    wrap.appendChild(remStyle);
                    doc.write(wrap.innerHTML);
                    wrap = null;
                }
                //要等 wiewport 設定好後才能執行 refreshRem，不然 refreshRem 會執行2次；
                refreshRem();

                win.addEventListener("resize", function() {
                    clearTimeout(tid); //防止執行兩次
                    tid = setTimeout(refreshRem, 300);
                }, false);

                win.addEventListener("pageshow", function(e) {
                    if(e.persisted) { // 瀏覽器後退的時候重新計算
                        clearTimeout(tid);
                        tid = setTimeout(refreshRem, 300);
                    }
                }, false);

                if(doc.readyState === "complete") {
                    doc.body.style.fontSize = "16px";
                } else {
                    doc.addEventListener("DOMContentLoaded", function(e) {
                        doc.body.style.fontSize = "16px";
                    }, false);
                }
            })(750, 750);
        </script>
    </head>

相關推薦

利用rem實現響應式佈局

<head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8">

如何利用rem做響應式佈局

第一步：由於一些解析度不同等的一些原因，要做到能夠適配，開始要加這個一句話 詳情的參考：https://blog.csdn.net/u012402190/article/details/70172371 <meta name="viewport" content="width=devi

vue-cli 中是使用css單位rem，實現響應式佈局

分享一種vue-lic中使用rem，實現響應式佈局的超簡單的方法。 第一步：封裝設定rem的方法，放在公用類的js檔案中，或者直接放在main.js檔案中。 /** * 設定rem * @param pwidth * @param prem */ export

html5如何利用rem實現自適應佈局

先來簡單瞭解rem是什麼：rem（font size of the root element）是指相對於根元素的字型大小的單位。簡單的說它就是一個相對單位。 所以我們只要定義好螢幕中根元素的字型大小就可以了。 定義好螢幕中根元素的字型大小，有兩種寫法： a

基於rem的響應式佈局

rem的佈局新見解 其實，在寫這篇部落格之前，我建議大家可以參看這篇文章從網易與淘寶的font-size思考前端設計稿與工作流，我在仔細消化這篇文章後做了一個自己的看法和理解，歡迎交流。 畫素單位的選擇 em的沒落 em的計算與繼承：em是基於父

【必看】CSS實現響應式佈局的方法與media的使用教程

用CSS實現響應式佈局 響應式佈局感覺很高大上，很難，但實際上只用CSS也能實現響應式佈局 要用的就是CSS中的沒接查詢，下面就介紹一下怎麼運用： 使用@media 的三種方法 1.直接在CSS檔案中使用： @media 型別 and (條件1) an

利用css寫響應式佈局

簡單記錄一下用css寫響應式佈局的方法。大概可以這麼理解，通過判斷螢幕的大小來調整css的樣式從而達到適應不同螢幕的目的。 首先先貼一個html，css都放在同級的css資料夾下面，因為有個簡單的輪播，所以要引入jquery。 <!DOCTYPE html>

rem+js響應式佈局的設定

直接呼叫程式碼即可，不過不同螢幕寬度要求會不同，相應修改一下就ok了 // rem響應式佈局 (function(){ var html=document.querySelector('html') html.sty

使用 media 實現響應式佈局

最近工作有一個需求是將一個介面改為響應式佈局，由於UI還沒有給設計，於是自己先查了一下資料做了一個demo。其實實現響應式佈局的方式有很多，利用media實現就是其中一種，但是他也有一些缺點，比如說要對特別的螢幕單獨定製樣式程式碼。在我的程式碼裡面我把螢幕分為了三種，代表為iPhone、iPad、PC三種，

rem實現簡單的響應式佈局

rem是什麼？ rem（font size of the root element）是指相對於根元素的字型大小的單位。簡單的說它就是一個相對單位。看到rem大家一定會想起em單位，em（font size of the 

一行css程式碼輕鬆實現前端響應式佈局（vw+rem）

大家知道rem可以用來做響應式佈局，只是html元素上的font-size樣式需要根據螢幕寬度來指定。 之前有用@media媒體查詢，根據各種螢幕寬度寫html的樣式，也用過類似lib-flexible這樣的js庫動態改變html樣式，總覺得挺麻煩的。 今天突然想到vw這個單位，發現用它來做響應式佈局實在

CSS3 - 使用彈性盒子（Flex Box）實現完美居中、柵格系統及響應式佈局

CSS3彈性盒子介紹 彈性盒子是 CSS3 的一種新的佈局模式。 CSS3 彈性盒（ Flexible Box 或 flexbox），是一種當頁面需要適應不同的螢幕大小以及裝置型別時確保元素擁有恰當的行為的佈局方式。 引入彈性盒佈局模型的目的是提供一種更加有效的方式來對一個容器中的子

如何根據不同裝置型別快速地實現網頁介面的響應式佈局，只需一句程式碼立馬實現。

在學習網頁製作的過程中，如何根據不用的裝置讓網頁介面能夠顯示出最佳的效果，這是讓廣大初學者為之煩惱的事情，但是今天如果你看了這篇博文，你的憂慮將一掃而光，會讓你感受到前端的樂趣。 首先，如何實現這樣的佈局呢？只需要一句程式碼就能實現，接下來讓我們看一下吧！ 當我們在進行程式碼編寫時，我們只需要這樣編寫：

【移動端】使用REM進行的響應式佈局

工具ViewtoREM：PX轉換到REM（自動預處理） REM的定義： rem是相對於根元素<html>來設定字型大小的，這樣就意味著，我們只需要在根元素確定一個參考值，在根元素中設定多大的字型，這完全可以根據您自己的需求。 REM與EM、PX的區別： PX：畫素，比

vw+vh+rem響應式佈局

1，概念的認識 rem:相對長度單位。相對於根元素(即html元素)font-size計算值的倍數; vw:相對於視口的寬度。視口被均分為100單位的vw; vh:相對於視口的高度。視口被均分為100單位的vh; vmax:相對於視口的寬度或高度中較大的那個。其中最大的那個被均分為100單位的vmax; vm

從scss入手實現響應式網格（柵格化）佈局

背景：最近檢視ife/2016的響應式佈局任務時，有大神同學通過scss的方法進行實現，第一次接觸scss，感覺受益匪淺，在此記錄一下。 一、任務目的        通過使用HTML和CSS實現類似BootStrap的響應式12欄網格佈局，根據螢幕寬度，元素佔的欄數不同。

關於響應式佈局的總結px,em與rem

1.px  在Web頁面初期製作中我們都是用px來設定我們的文字的，因為它比較穩定和準確。但是當用戶在瀏覽器中瀏覽我們製作的Web頁面時，它改變了瀏覽器的字型大小，會使Web頁面佈局被打破。這樣對於那些關心自己網站可用性的客戶來說，就是一個大問題了。因此，這時就提出了使用e

完美的響應式佈局vw+vh+rem螢幕適配方案！

一、前言 根據前面寫的  你不知道的CSS單位，進行了一種響應式佈局的思考。   視口布局的優點：寬度和高度全部自動適應！再加上rem佈局的字型適應，可以完美解決各種螢幕適配問題！ 該佈局相容性如下： IE Firefox Chrome Safa

響應式佈局之尺寸單位rem使用

web實際開發過程中,特別是移動端的頁面，會遇到元素尺寸及字型在不同解析度裝置上表現差異較大，甚至嚴重影響使用者體驗； 我現在的做法是使用rem作為尺寸單位，來實現頁面內元素尺寸及字型在不同寬度裝置下自由縮放尺寸，從而解決小螢幕上顯示牛大字的尷尬情況； 1. 設定ht

自適應佈局，響應式佈局以及rem,em區別

一、簡而言之， 自適應：不同大小裝置呈現同樣的頁面效果，只是文字、圖片等的大小不一樣，但是相對位置一樣。即在不同大小裝置看起來一樣 響應式：不同大小裝置可能呈現不一樣的頁面效果            自己畫了一個簡略的示意圖，如下： 二、rem,em區別 rem,em都