初探響應式Web設計

時間 2019-11-12

標籤初探響應 web 設計欄目 HTML 简体版

原文原文鏈接

公司書櫃有本《響應式Web設計：HTML5和CSS3實戰》，大概就認真看了前面幾章，後面大部分介紹css3（隨便找本手冊均可以了要你可用！）css

《響應式Web設計：HTML5和CSS3實戰》html

移動優先的跨終端 Web 天貓前端 @徐凱-鬼道 W3CTECH 2013 http://luics.com/demo/cew-w3ctech-1311/#/前端

響應式佈局設計思想概念

響應式佈局是Ethan Marcotte在2010年5月份提出的一個概念，簡而言之，就是一個網站可以兼容多個終端——而不是爲每一個終端作一個特定的版本。這個概念是爲解決移動互聯網瀏覽而誕生的。css3

響應式佈局能夠爲不一樣終端的用戶提供更加溫馨的界面和更好的用戶體驗，並且隨着目前大屏幕移動設備的普及，用大勢所趨來形容也不爲過。隨着愈來愈多的設計師採用這個技術，咱們不只看到不少的創新，還看到了一些成形的模式。web

優勢和缺點chrome

優勢：瀏覽器

面對不一樣分辨率設備靈活性強服務器

可以快捷解決多設備顯示適應問題app

缺點：框架

兼容各類設備工做量大，效率低下

代碼累贅，會出現隱藏無用的元素，加載時間加長

其實這是一種折中性質的設計解決方案，多方面因素影響而達不到最佳效果

必定程度上改變了網站原有的佈局結構，會出現用戶混淆的狀況

根據不一樣的寬度進行識別,css3 media, 字體rem 按照根元素進行放大,避免css sprite按鈕等,否則要使用圖片縮放進行設置

設計思想

mobile frist (移動優先)

A級必須兼容, 簡單來講比較廣泛是最低兼容 480 768 1024 這三個分別率,如今還有 1280 1960 等等級別要考慮(4k等等仍是須要media進行選擇

media ie8-6不支持可使用respond令到其支持,不過不須要(ie8如下就給他使用默認css,沒必要太友善對待,必需要兼容能夠考慮使用Respond.js

內容優先是響應式的第二個思想,讓主體內容首先顯示,還有是對應部分次要模塊進行修正排版顯示在後面。

例子就看我博客就能夠了！（改版以後再說）

1200-1920（固定1200）（主要桌面級對於4k設備暫時還未考慮）

1200-1024（固定1000）（舊pc和平板）（ie6-8不支持響應式也默認這個寬度，然而對應太過老舊的東西我我的是不想作的）

768（768-1000）（寬99%）（我的確實不喜歡滿屏）

上面只是兼容徹底無說到內容優先吧客官稍慢，如今上菜

480-768 對應左右模塊放在一塊兒顯得會太過緊湊，針對移動設備把主題內容優先，因此文章列表在上面日期公告就被我放置在列表到下面，（其實思想就是這麼簡單）

簡單的響應式佈局

根據寬度來變顏色

<!doctype html>

<head>

<title>Responsive Design</title>

<style>

.content{

color: #123;

border: 1px solid #123;

width:98%;

margin: 0 auto;

}

@media screen and (max-width:1024px){

.content{

color: orange;

border: 1px solid orange;

width:95%;

}

@media screen and (max-width: 768px){

.content{

color: red;

border: 1px solid red;

width:98%;

}

@media screen and (max-width: 480px){

.content{

color: green;

border: 1px solid green;

width: 95%;

}

</style>

</head>

<body>

</body>

</html>

媒體查詢能檢測那些特性

 width：視口寬度。

 height：視口高度。

 device-width：渲染表面的寬度（對咱們來講，就是設備屏幕的寬度）。

 device-height：渲染表面的高度（對咱們來講，就是設備屏幕的高度）。

 orientation：檢查設備處於橫向仍是縱向。

 aspect-ratio：基於視口寬度和高度的寬高比。一個16∶9 比例的顯示屏能夠這樣定義aspect-ratio: 16/9。

 device-aspect-ratio：和aspect-ratio 相似，基於設備渲染平面寬度和高度的寬高比。

 color：每種顏色的位數。例如min-color: 16 會檢測設備是否擁有16 位顏色。

 color-index：設備的顏色索引表中的顏色數。值必須是非負整數。

monochrome：檢測單色幀緩衝區中每像素所使用的位數。值必須是非負整數，如monochrome: 2。

 resolution：用來檢測屏幕或打印機的分辨率，如min-resolution: 300dpi。還能夠接受每釐米像素點數的度量值，如min-resolution: 118dpcm。

 scan：電視機的掃描方式，值可設爲progressive（逐行掃描）或interlace（隔行掃描）。如720p HD 電視（720p 的p 即代表是逐行掃描）匹配scan: progressive，而1080i HD 電視（1080i 中的i 代表是隔行掃描）匹配scan: interlace。

 grid：用來檢測輸出設備是網格設備仍是位圖設備。在上述全部特性中，除scan 和grid 以外，均可使用min 和max 前綴來建立一個查詢範圍。例如，分析以下所示的代碼片斷：

 @import url("phone.css") screen and (min-width:200px) and (max-width:360px);這裏對width 應用了min 和max 來設定查詢範圍。這樣phone.css 文件只會引入視口寬度介於200 像素至360 像素的顯示屏設備。

根據上述能夠先寫一個無media的css 讓一些低端瀏覽器去讀取,大概就是1024等級用戶,後面使用media 對其餘分辨率進行覆蓋重寫.