2. 程式人生 > >手寫響應式佈局，

手寫響應式佈局，

阿新 • • 發佈：2018-12-30

自己動手寫響應式佈局

1. 不多說看一下需求

  1. 現有的響應式框架（bootstrap）在一些使用上邊不能滿足你的需要（你要做的比較少，框架提及做得多）
    2.不想引進那麼多的檔案，就一個頁面只想簡單處理
    3.效能追求極致，框架的引入檔案，和自己的檔案引入的太多了，
    4.逼格提升，想自己寫

2. 不多說原理簡單，就是新的屬性@media

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv
 
="X-UA-Compatible" content="IE=edge">
    <title></title>
    <link rel="stylesheet" href="">
    <style type="text/css">
    //%%開發時不能這樣處理margin和padding%%
    * {
        margin: 0;
        padding: 0;
    }
        @media (min-width:0px) and (max-width: 768px) {
            .header
 
 {
                width: 100%;
                height: 300px;
                background-color: yellow;
            }
        }
        @media (min-width:769px) and (max-width:992px){
            .header {
                width: 100%;
                height: 250px;
                background-color: red;
            }
 

        }
        @media (min-width: 993px) and (max-width: 1200px){
            .header {
                width: 100%;
                height: 200px;
                background-color: blue;
            }
        }
        @media (min-width: 1201px) and (max-width: 1400px){
            .header {
                width: 100%;
                height: 200px;
                background-color: pink;
            }
        }
    </style>
</head>
<body>
    <header id="header" class="header">
    </header>
</body>
</html>
  1. 注意你要相容市場上95%以上的螢幕，超大螢幕注意也要相容（1200px—1400px||1600px）,但是由主要相容的螢幕區間
    2.想檢視市場上螢幕的使用情況：https://tongji.baidu.com/web/welcome/login （百度統計，想看什麼就有什麼）
    3.上面的程式碼只有header部分，比你想寫的那部分內容放在相應的位置，，頭部是這樣，，main也是這樣
    4.自己寫響應式比較麻煩，可能需要不止一套的UI設計稿，如果專案時間允許，可以自己寫，自己權衡！

如果有什麼建議或者意見，郵箱：[email protected]

相關推薦

手寫響應式佈局，

自己動手寫響應式佈局 1. 不多說看一下需求 現有的響應式框架（bootstrap）在一些使用上邊不能滿足你的需要（你要做的比較少，框架提及做得多） 2.不想引進那麼多的檔案，就一個頁面只想簡單處理 3.效能追求極致，框架的引入檔案，和自己的檔案引入的太多了

web前端之響應式佈局，你必須要知道的

一、前言 響應式Web設計可以讓一個網站同時適配多種裝置和多個螢幕，可以讓網站的佈局和功能隨使用者的使用環境（螢幕大小、輸入方式、裝置/瀏覽器能力）而變化。本文主要介紹一些響應式佈局容易忽略但又很重要的知識點。 二、視口 移動前端中常說的 viewport （視口）就是瀏覽器中用於呈現網

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

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

利用css寫響應式佈局

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

關於響應式佈局，你必須要知道的

轉載自奇舞週刊 前言 響應式Web設計可以讓一個網站同時適配多種裝置和多個螢幕，可以讓網站的佈局和功能隨使用者的使用環境（螢幕大小、輸入方式、裝置/瀏覽器能力）而變化。本文主要介紹一些響應式佈局容易忽略但又很重要的知識點。 視口 移動前端中常說的 viewport （視口）就是瀏覽器中用於呈現網頁的區

響應式佈局，你必須要知道的

一、前言 響應式Web設計可以讓一個網站同時適配多種裝置和多個螢幕，可以讓網站的佈局和功能隨使用者的使用環境（螢幕大小、輸入方式、裝置/瀏覽器能力）而變化。本文主要介紹一些響應式佈局容易忽略但又很重要的知識點。 二、視口 移動前端中常說的 viewport （視

html5響應式佈局，相容ie7.8

1：Meta標籤 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 2，IE8或者更早的瀏覽器並不支援Media Query。在此引入respond.js <

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

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

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

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

初學者如何寫移動端響應式佈局

該篇文章首發於我的個人部落格：http://cherryblog.site/ 使用github+coding+hexo搭建的靜態部落格，更多文章請移步至我的個人部落格 一、百分比佈局 剛入前端坑的時候就是使用百分比佈局，覺得百分比佈局可以解決移動端

代碼寫響應式時鐘效果

eth ani con ase sans col urn htm animation 只需3個文件，就可以實現鐘表效果，還是先看圖再來看代碼效果 時間是用的北京時間 再來看它的源代 html文件 <!DOCTYPE html PUBLIC "-//W3

Bootstrap3基礎 row 柵格系統（非響應式），1行最多12列

nta blue 屏幕 視頻 鍛煉 cast 思考 3.3 系統 禮悟：　　 公恒學思合行悟，尊師重道存感恩。葉見尋根三返一，江河湖海同一體。 虛懷若谷良心主，願行無悔給最苦。讀書鍛煉養身心，誠勸且行且珍惜。 　　 i

自定義View，流式佈局，

  寫的比較基礎, 備忘使用。 public class FlowLayout extends ViewGroup { public FlowLayout(Context context) { this(context, null); }

響應式佈局——CSS Media Query

前言 現在越來越多的人使用手機平板等移動裝置來瀏覽網站，所以網站開發中響應式佈局非常重要。下面記錄一個簡單的響應式佈局方案，使用 HTML+CSS 來實現，（CSS Media Query）。並附上一個響應式簡單部落格。 實現 原理 本次記錄的響應式開發原理非常簡單，就是通過

笨鳥兒 靜態佈局、自適應佈局、流式佈局、響應式佈局、彈性佈局等的概念和區別

一、靜態佈局（Static Layout） 即傳統Web設計，網頁上的所有元素的尺寸一律使用px作為單位。 1、佈局特點：不管瀏覽器尺寸具體是多少，網頁佈局始終按照最初寫程式碼時的佈局來顯示。常規的pc的網站都是靜態（定寬度）佈局的，也就是設定了min-width，這樣的話，如果小於這個寬度就會

響應式佈局 meta詳解

響應式佈局詳解之head標籤新增的屬性詳解 <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no"> 表示:設定螢幕按1

CSS - 響應式佈局

  概念 隨著網頁大小的改變，而改變佈局的響應方式。 例如：https://www.golaravel.com/ 實現方式 - interger 設定觸發寬度 網頁小於<integer>設定寬度 @m

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

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

簡約響應式佈局樣式

1 @font-face { 2 font-family: 'FontAwesome'; 3 font-style: normal; 4 font-weight: normal; 5 } 6 * { 7 margin: 0; 8 padd

移動端流體佈局和響應式佈局注意事項——day nine

流體佈局： 什麼是流體佈局？ 流體是採用了一些設定，當寬度大於多少時怎麼展示，小於多少時怎麼展示，而且展示的方式向水流一樣，一部分一部分的載入 移動端有兩種設計方式： 全屏設計，在 PC 端和 PAD 平板也可以無縫瀏覽，但圖片卻會失真。 固屏設計、雖然會留有白邊，