整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
機，平板設備的暴增，直接促進了移動互聯網的大潮來襲，互聯網迎來了更多的變革，包括web前端行業也是， 現在變為移動web前端開發了，有多少人迎風倒下，又有多少人經受了這場革命的洗禮。這次教大家如何為自己網站添加響應式，快速抓住移動互聯網用戶。
流行的有某適配，如果你愿意每年支出高額的費用的話，這里介紹的是一個屌絲如何為網站添加響應式，響應式實現原理非常簡單：就是通過css3 media query技術通過瀏覽器窗口寬度的判斷，來調整合適的布局。
1，在網站head區間里面添加
<meta content="width=device-width,initial-scale=1" name="viewport">
2,在head區域添加
<link rel="stylesheet" href="css/responsive.css">，在目錄下新建 responsive.css文件。
3，書寫css代碼
/*當寬度為640的時候的樣式*/
@media only screen and (max-width:640px) {
}
/*當寬度為480的時候的樣式*/
@media only screen and (max-width:480px) {
}
書寫css代碼需要你有一些css基礎，可以上w3school學習下，切圖網開發了一款用于快速響應式布局的css框架——快切，它包含了很多具有響應式的組件構成，基于它可以快速完成響應頁面的搭建。
http://kuaiqie.qietu.com
如果你對web前端技術感興趣，加我們微信：qietuwang
文地址: https://medium.com/free-code-camp/how-to-make-your-html-responsive-by-adding-a-single-line-of-css-2a62de81e431
原文作者: Per Harald Borgen
翻譯作者: https://github.com/hanxiansen
在這篇文章中，我將教你如何使用 CSS Grid 來創建一個超酷的圖像網格圖，它將根據屏幕的寬度來改變列的數量。最精彩的地方在于：所有的響應特性被添加到了一行 css 代碼中。這意味著我們不必將 HTML 與丑陋的類名(如col-sm-4, col-md-8)混雜在一起，也不必為每個屏幕創建媒體查詢。ok，讓我們發車吧。
在本文中，我將繼續使用我在第一篇 CSS Grid 布局教程文章中的網格布局。然后，我們將在文章末尾添加圖片。下面是我們初始化網格的外觀：
HTML 代碼：
<div class="container"> <div>1</div> <div>2</div> <div>3</div> <div>4</div> <div>5</div> <div>6</div> </div>
CSS 代碼：
.container {
display: grid;
grid-template-columns: 100px 100px 100px;
grid-template-rows: 50px 50px;
}
注意: 示例中有一些基礎的樣式，但我在這里沒有寫出來，因為這對 CSS 網格布局沒有任何影響
如果這段代碼讓你感到困惑，我建議你去好好讀下我的這篇文章 Learn CSS Grid in 5 minutes ，其中就詳細的解釋了布局的基礎知識。
讓我們讓列開始具有自適應特性吧。
CSS 柵格布局帶來了一個全新的值:fraction單位，fraction單位通常簡寫為fr，它允許你根據需要將容器拆分為多個塊。
讓我們將每一列更改為一個 fraction 單位寬:
.container {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-template-rows: 50px 50px;
}
結果是柵格布局將會把整個寬度分成三個 fraction，每列占據一個 fraction 單位，效果如下：
如果我們將grid-template-columns的值更改為1fr 2fr 1fr，第二列的寬度將會是其它兩列的兩倍。總寬現在是四個 fraction 單位，第二列占據兩個 fraction 單位，其它列各占一個 fraction。效果如下：
總的來說，fraction 單位值將使你可以很容易的更改列的寬度。
然而，上面列子并沒有給出我們想要的響應性，因為網格總是三列寬。我們希望網格能根據容器的寬度改變列的數量。要做到這一點，你必須學習如下三個概念：
repeat()
首先我們學習repeat()函數。這是一個強大的指定列和行的方法。讓我們使用repeat()函數來更改網格:
.container {
display: grid;
grid-template-columns: repeat(3, 100px);
grid-template-rows: repeat(2, 50px);
}
在上面代碼中，repeat(3, 100px)等于100px 100px 100px。第一個參數指定行與列的數量，第二個參數指定它們的寬度，因此它將為我們提供與開始時完全相同的布局：
然后是auto-fit。讓我們跳過固定數量的列，將3替換為自適應數量：
.container {
display: grid;
grid-gap: 5px;
grid-template-columns: repeat(auto-fit, 100px);
grid-template-rows: repeat(2, 100px);
}
效果如下:
現在，柵格將會根據容器的寬度調整其數量。它會嘗試在容器中容納盡可能多的 100px 寬的列。但如果我們將所有列硬寫為 100px，我們將永遠沒法獲得所需的彈性，因為它們很難填充整個寬度。正如你在上圖看到的，網格通常在右側留有空白。
為了解決上述問題，我們需要minmax()。我們將 100px 替換為 minmax(100px, 1fr)，代碼如下：
.container {
display: grid;
grid-gap: 5px;
grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
grid-template-rows: repeat(2, 100px);
}
請注意，所有響應都發生在一行 css 代碼中
效果如下：
正如你所見，效果完美。minmax()函數定義的范圍大于或等于 min， 小于或等于 max。
因此，現在每列將至少為 100px。但如果有更多的可用空間，柵格布局將簡單地將其均分給每列，因為這些列變成了 fraction 單位，而不是 100px。
添加圖片
最后一步是添加圖片。這與 CSS Grid 布局無關，但讓我們看下代碼。
我們在每個網格中添加一個圖片標簽：
<div><img src="img/forest.jpg"/></div>
為了使圖片適應于每個條目，我們將其寬、高設置為與條目本身一樣，我們使用object-fit:cover。這將使圖片覆蓋它的整個容器，根據需要，瀏覽器將會對其進行裁剪。
.container > div > img {
width: 100%;
height: 100%;
object-fit: cover;
}
效果如下：
ok！現在你已經了解了 CSS Grid 布局中最復雜的概念之一了，請給自己一個贊吧。
瀏覽器兼容性
在結束本文前，我提下瀏覽器支持情況，在撰寫本文時，全球77%的網站將支持 CSS Grid，而且比例還在逐步攀升。
我想想2018將是 CSS 網格布局的元年。它將獲得突破，并成為前端開發者的必備技能，就像過去幾年 CSS Flexbox 布局發生的情況一樣。
輯導語：利用響應式網頁設計創建網頁布局，設計將能夠更好地適配不同的屏幕和尺寸。那么，隨著設計行業的不斷更迭，未來響應式網頁設計又可能會怎么發展？本篇文章里，作者就“響應式網頁設計”的發展問題做了解答，一起來看一下。
如果你和我一樣一直在網頁設計行業，你知道一件事即將發生，唯一不變的就是變化。大約每10年，我們做事的方式就會發生根本性的轉變，這對于超越我們之前所做的事情至關重要……我們即將再次跨入下一個階段。
在千禧年來臨之前，我們首先開始在單一視圖屏幕中進行UI設計，這類屏幕在當時最流行的尺寸是640×480。大多數時候，我們甚至沒有考慮讓屏幕滾動，而是在特定區域或文本局部區塊中設置了內部滾動條。
毋庸置疑，當時的大部分網頁也是用Flash或HTML創建的，并帶有用于布局的表格。那是在智能手機出現之前，隨著事物的發展，我們經歷了第一個向“響應式”設計的根本轉變。我們已經走了很長一段路，CSS已得到長足的發展，“響應式”網頁設計從2010年開始才真正獲得了專有工具。
隨著CSS3的發布，我們獲得了對“媒體查詢”（Media Queries）的訪問權限（譯者注：隨著移動互聯網的興起，我們需要適配多種移動端設備，這就需要用到Media Queries，即“媒體查詢”），此后不久，Ethan Marcotte在2009年底創造了“響應式設計”一詞。
十多年來，我們一直使用“響應式網頁設計”（RWD）創建網頁布局，作為一種網頁設計方法，僅需基于一種屏幕尺寸進行設計，“響應式”使我們的設計能夠適配各種設備和屏幕尺寸。
在早期，當移動電話還不兼容媒體查詢或JavaScript時，“移動優先”和”漸進式增強”的概念就成為了非常流行的方法，當時有很多CSS完全不受支持。
用我們今天的話來說響應式設計，我們認為頁面的布局要適配整個瀏覽器、屏幕大小和那些需要投射到整個布局上的限制。當需要設計從桌面端調整為移動設備屏幕所需的尺寸時，我們使用“媒體查詢”來更改整個頁面布局。
很快，使用這種“響應式”設計方法可能會被認為與使用表格進行頁面布局一樣過時——就像我們在90年代所做的那樣。
我們通過基于viewport（視口）的“媒體查詢”獲得了許多強大的工具，但我們也缺乏很多適配的可能性，因為“媒體查詢”是一個適用于整個頁面的通用解決方案，并且對每個用戶來說都一樣。我們缺乏響應“用戶需求”的能力，也缺乏將“響應式”樣式注入“組件”本身的能力。
當我們談到組件時，這里指的是頁面上的“元素”，這些元素可以由其它“元素”的集合組成。
例如卡片、橫劃卡或推薦模塊之類的UI內容，每個“塊”都由各種更小的“構建塊”組成。這些組件拼湊在一起構成我們的網頁。我們可以使用 global viewport information（全局視口信息）來設置這些組件，但它們仍然無法擁有自己的風格。當我們的設計系統是基于“組件”的而不是基于“頁面”的時，這使得它變得更加困難。
好消息是這個生態系統正在發生變化，而且它正在迅速變化，這需要我們進行一些思維轉變：考慮如何設計和定義組件樣式以及它們如何適應周圍環境。
CSS正在不斷發展，“響應式”網頁設計的新時代即將到來。從目前的情況來看，自從我們第一次引入 “響應式網頁設計”（RWD）以來，僅僅10多年的時間，這個生態系統已經準備好迎接CSS發生一些相當大的改變。
讓我們深入研究一下可以期待哪些類型的變化，這會如何改變我們的設計方法，以及我們如何考慮界面設計。
簡單來說，我們可以期待新的基于偏好的“媒體查詢”來幫助我們更好地“響應”用戶。它們將使我們能夠根據用戶自己的特定偏好或需求來設定網頁樣式。這將使我們能夠根據用戶的體驗偏好來調整用戶體驗。
這絕不是一個完整的列表，但能給你一些想法，這些基于偏好的“媒體查詢”可能包括：
這些將幫助我們構建更具活力和個性化的網頁體驗，專門滿足我們用戶的專屬需求，尤其是那些希望網站易于訪問的用戶。
更進一步說，這些基于偏好的“媒體查詢“尊重任何用戶已經在操作系統設置的偏好。
舉個例子，當用戶的操作系統偏好設定為“減少動效”時，他們很可能不喜歡你頁面上的超級華麗的介紹、加載或飛入的動畫動效。我們應先尊重他們的偏好，并為其他人提供“動效增強”的體驗。
另一個流行的媒體查詢是@prefers-color-scheme（配色偏好設定），它允許我們根據用戶的偏好和操作系統中的設置將我們的設計更改為“亮色模式”或“暗色模式”。這不依賴于用戶需要手動來更改“暗色模式”，它會自動發生。
CSS 中最令人興奮的新興領域之一是“容器查詢”（container queries），通常也稱為“元素查詢”。從基于“頁面”的“響應式”設計到基于“容器”的“響應式”設計的轉變對發展“設計系統”的作用價值不容低估，盡管今天使用它并不安全，但重要的是要了解其發展方向。
簡而言之，“容器查詢”將允許我們基于“父級容器”而不是整個頁面來設置規則。這意味著任何組件都更加獨立，與現代設計系統保持一致，真正成為“即插即用”模塊，可以轉移到任何頁面或布局，而且無需根據新環境重新考慮所有內容。
“容器查詢”為我們如何規劃、設計和構建特定組件提供了一種更加動態的方法，因為組件本身擁有它的響應信息。
甚至Ethan Marcotte自己也表達了為什么“容器查詢”如此重要，我們應該研究一下。
由于各種“形態因素”（form factors）的變化和擴展，例如新的屏幕類型，可折疊屏，我們需要“媒體查詢”來考慮這些場景。在這里提到的所有內容中，請記住，這是最具實驗性的，并且只是一項正在進行的工作，仍在嘗試解決我們可能遇到的任何復雜問題，同時考慮未來“形體因素”可能會如何發展。
在可折疊屏場景中，原型中有一些“媒體查詢”可以讓你定位屏幕跨度以及我們如何讓內容根據新環境進行適配。例如，你可以在一個屏幕上放置一個收起的側邊欄（或菜單），并允許內容在另一個屏幕上展開并隨頁面滾動。
我知道你在想什么，我們已經從事網頁設計并使用“響應式”來進行網頁設計10余年了。我們對其相當滿意，那么為什么要改變呢？
如果我們真的以終局視角來看響應式設計，那么它就是關于個人用戶的用戶體驗設計。我們正朝著一個與每一位個體用戶高度相關的時代邁進。我們的網頁體驗應該去適應用戶的需求偏好。隨著設計系統的發展以及我們如何創建更便攜的網頁，諸如“容器查詢”之類的工具將變得非常有意義。
配圖：CSS 將基于各個層級來確定用戶的最佳體驗
考慮到這一點，這意味著我們現在可以使用基于頁面的媒體查（包括跨越屏幕的細微差別）來設計宏觀布局；使用容器查詢的組件設計微觀布局；使用基于用戶偏好的媒體查詢，根據用戶獨特的偏好和需求定制用戶體驗。
對于新的響應式設計，有許多新概念正在被原型化和概念化——請看下面的延伸閱讀。
所有這些協同工作的方式需要我們從根本上轉變我們對設計和用戶獨特體驗的看法。我們需要更加適應這樣一個事實：即我們的設計不是靜態的，不僅在布局上，還有在用戶可獲得的體驗中，我們需要學會在這種模糊性中做出計劃。網頁和設計的未來變得越來越復雜，我們需要適應和挑戰自己，理解“新響應式”體驗的意義。
進一步了解
本文原作者：FrancoisBrill
作者：百度MEUX，百度移動生態用戶體驗設計中心，負責百度移動生態體系的用戶/商業產品的全鏈路體驗設計
本文由 @百度MEUX 原創發布于人人都是產品經理，未經許可，禁止轉載
題圖來自Unsplash，基于CC0協議
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
