從零開始學 Web 之 移動Web(六)響應式佈局
大家好,這裡是「 從零開始學 Web 系列教程 」,並在下列地址同步更新......
- github:https://github.com/Daotin/Web
- 部落格園:http://www.cnblogs.com/lvonve/
- CSDN:https://blog.csdn.net/lvonve/
在這裡我會從 Web 前端零基礎開始,一步步學習 Web 相關的知識點,期間也會分享一些好玩的專案。現在就讓我們一起進入 Web 前端學習的探索之旅吧!
網頁佈局
常見的網頁佈局方式分為以下四種:
1、固定寬度佈局:為網頁設定一個固定的寬度,通常以px做為長度單位,常見於PC端網頁。
2、流式佈局:為網頁設定一個相對的寬度,通常以百分比做為長度單位。
3、柵格化佈局:將網頁寬度人為的劃分成均等的長度,然後排版佈局時則以這些均等的長度做為度量單位,通常利用百分比做為長度單位來劃分成均等的長度。
4、響應式佈局:通過檢測裝置資訊,決定網頁佈局方式,即使用者如果採用不同的裝置訪問同一個網頁,有可能會看到不一樣的內容,一般情況下是檢測裝置螢幕的寬度來實現。
注:以上幾種佈局方式並不是獨立存在的,實際開發過程中往往是相互結合使用的。"
1、響應式佈局
響應式佈局,意在實現不同螢幕解析度的終端上瀏覽網頁的不同展示方式。
通過響應式設計能使網站在手機和平板電腦上有更好的瀏覽閱讀體驗,如下圖:
如上圖所示,螢幕尺寸不一樣展示給使用者的網頁內容也不一樣,我們利用 媒體查詢
2、響應式佈局的缺點
我們利用響應式佈局可以滿足不同尺寸的終端裝置非常完美的展現網頁內容,使得使用者體驗得到了很大的提升,但是為了實現這一目的我們不得不利用媒體查詢寫很多冗餘的程式碼,使整體網頁的體積變大,應用在移動裝置上就會帶來嚴重的效能問題。
響應式佈局常用於企業的官網、部落格、新聞資訊型別網站,這些網站以瀏覽內容為主,沒有複雜的互動。
3、螢幕尺寸的劃分
一般我們會對常見的裝置尺寸進行劃分後,再分別確定為不同的尺寸的裝置設計專門的佈局方式,如下圖所示
型別 | 佈局寬度 |
---|---|
大螢幕 | >= 1200px |
預設 | >= 980px |
平板 | >= 768px |
手機到平板之間 | <= 767px |
手機 | <= 480px |
4、媒體查詢
參考連結:http://www.runoob.com/cssref/css3-pr-mediaquery.html
使用 @media
查詢,你可以針對不同的媒體型別定義不同的樣式。
@media
可以針對不同的螢幕尺寸設定不同的樣式,特別是如果你需要設定設計響應式的頁面,@media 是非常有用的。
當你重置瀏覽器大小的過程中,頁面也會根據瀏覽器的寬度和高度重新渲染頁面。
CSS 語法:
@media mediatype and|not|only (media feature) {
/*CSS-Code*/
}
/*或者引入不同樣式檔案的判斷:當滿足某個條件的時候,引入mystylesheet.css樣式*/
<link rel="stylesheet" media="mediatype and|not|only (media feature)" href="mystylesheet.css">
mediatype 取值:
all 用於所有裝置
print 用於印表機和列印預覽
screen 用於電腦螢幕,平板電腦,智慧手機等。
speech 應用於螢幕閱讀器等發聲裝置
and|not|only:
and 同時滿足,相當於 &&;
not 取反(一般寫在 mediatype 前面)
示例:
<style>
body{
background-color: red;
}
/* 不在768-992之間的時候,設定背景顏色為藍色*/
@media not screen and (min-width: 768px) and (max-width: 992px){
body{
background-color: blue;
}
}
</style>
media feature 取值:(主要關注以下三個寬度)
device-height 定義輸出裝置的螢幕可見高度。
device-width 定義輸出裝置的螢幕可見寬度。
max-device-height 定義輸出裝置的螢幕可見的最大高度。
max-device-width 定義輸出裝置的螢幕最大可見寬度。
min-device-width 定義輸出裝置的螢幕最小可見寬度。
min-device-height 定義輸出裝置的螢幕的最小可見高度。
max-height 定義輸出裝置中的頁面最大可見區域高度。
max-width 定義輸出裝置中的頁面最大可見區域寬度。
min-height 定義輸出裝置中的頁面最小可見區域高度。
min-width 定義輸出裝置中的頁面最小可見區域寬度。
4.1、min-width 與 min-device-height 的區別
device 表示的是裝置,所以加了 device 的 範圍取值表示的是裝置的寬度範圍。
- 在移動端,由於通過模擬器改變的是移動端裝置的寬度,所以 min-width 與 min-device-height 效果一樣;
- 在 PC 端,如果改變瀏覽器的寬度,而我們電腦的寬度並沒有改變,所以裝置的寬度一定,最終的效果就是隻有一個範圍起作用。
4.2、案例:控制不同螢幕尺寸下螢幕背景色,
<style>
.container{
width:1200px;
margin: 0 auto;
height:1200px;
background-color: red;
}
/*媒體查詢:注意and後面空格的新增*/
/*iphone: w < 768px*/
@media screen and (max-width: 768px){
.container{
width:100%;
background-color: green;
}
}
/*pad: w >= 768 && w< 992*/
@media screen and (max-width: 992px) and (min-width: 768px) {
.container{
width:750px;
background-color: blue;
}
}
/*中等螢幕 w >= 992 && w<1200*/
@media screen and (max-width: 1200px) and (min-width: 992px) {
.container{
width:970px;
background-color: pink;
}
}
</style>
4.3、媒體查詢條件判斷的順序
原因:如果結構如上面示例的那樣,並且媒體查詢條件由重疊的話,後面的媒體查詢樣式設定會覆蓋前面的媒體查詢設定,為了避免發生這種情況,我們就應該遵循一定的規律,使得不同的媒體查詢條件下,執行不同的樣式,而不會發生衝突。
特點:
向上相容:如果設定了寬度更小時的樣式,預設這些樣式也會傳遞到寬度更大的條件範圍內.
向下覆蓋:寬度更大的樣式會將前面寬度更小的樣式覆蓋
書寫建議:
- 如果是判斷最小值 (min-width),那麼範圍就應該從小到大寫
- 如果是判斷最大值 (max-width),那麼範圍就應該從大到小寫
例如:
@media screen and (min-width: 768px){
body{
background-color: green;
}
}
!*w:992!1200 blue min-width: 992px:當螢幕的寬度大於等於992的時候*!
@media screen and (min-width: 992px){
body{
background-color: blue;
}
}
!*w>1200 pink*!
@media screen and (min-width: 1200px){
body{
background-color: pink;
}
}
相關推薦
從零開始學 Web 之 移動Web(六)響應式佈局
大家好,這裡是「 從零開始學 Web 系列教程 」,並在下列地址同步更新...... github:https://github.com/Daotin/Web 部落格園:http://www.cnblogs.com/lvonve/ CSDN:https://blog.csdn.net/lvonve/
《從零開始學Swift》學習筆記(Day67)——Cocoa Touch設計模式及應用之MVC模式
table control sdn rate term targe rac uitabbar bsp 原創文章,歡迎轉載。轉載請註明:關東升的博客 MVC(Model-View-Controller,模型-視圖-控制器)模式是相當古老的設計模式之中的一個,它最早出如今
《從零開始學Swift》學習筆記(Day60)——Core Foundation框架
類型轉換 字符 sso grid blog spa www water 轉載 創文章,歡迎轉載。轉載請註明:關東升的博客 Core Foundation框架是蘋果公司提供一套概念來源於Foundation框架,編程接口面向C語言風格的API。盡管在Swift中調用這樣
從零開始學Kotlin-使用接口(7)
如何 mark android interface inter rand 兩個 blog dtw 從零開始學Kotlin基礎篇系列文章 定義接口 使用關鍵字interface定義接口 interface InterfaceDemo7 { } 類或對象可以實現一個或者多個接
webpack從零開始構建專案之rem問題(三)
使用webpack解決px轉rem的自適應問題 現在的專案配置已經可以正常執行 接下來我們要考慮下一個問題,由於VUE主要適用於移動端,所以我們需要一個自適應方案 由於這是一個大眾需求的剛需方案,所以我們大可不必自己手動去寫JS程式碼,重複造輪子 那麼我
【高德地圖API】從零開始學高德JS API(七)——定位方式大揭祕
摘要:關於定位,分為GPS定位和網路定位2種。GPS定位,精度較高,可達到10米,但室內不可用,且超級費電。網路定位,分為wifi定位和基站定位,都是通過獲取wifi或者基站資訊,然後查詢對應的wifi或者基站位置資料庫,得到的定位地點。定位資料庫可以不斷完善不斷補充,所以,
轉載:高德地圖API學習 從零開始學高德JS API(一)地圖展現
摘要:關於地圖的顯示,我想大家最關心的就是麻點圖,自定義底圖的解決方案了吧。在過去,marker大於500之後,瀏覽器開始逐漸卡死,大家都開始尋找解決方案,比如聚合marker啊,比如麻點圖啊。聚合marker裡面還有一些複雜的演算法,而麻點圖,最讓大家頭疼的,就是如何生成麻點圖,如何切圖,如何把圖片貼到地圖
從零開始學 Web 之 Vue.js(六)Vue的元件
大家好,這裡是「 從零開始學 Web 系列教程 」,並在下列地址同步更新...... github:https://github.com/Daotin/Web 部落格園:http://www.cnblogs.com/lvonve/ CSDN:https://blog.csdn.net/lvonve/
《從零開始學Swift》學習筆記(Day 57)——Swift編碼規範之凝視規範:文件凝視、文檔凝視、代碼凝視、使用地標凝視
精品 -type mil 顯示 clas ber ansi tex text 原創文章。歡迎轉載。轉載請註明:關東升的博客 前面說到Swift凝視的語法有兩種:單行凝視(//)和多行凝視(/*...*/)。這裏來介紹一下他們的使用規範。 1、文件凝視文件凝視就在每個文
【SpringMvc】從零開始學SpringMvc之資料庫(二)
大家好,在上一篇中,我們介紹了SpringMvc 的搭建,這篇我們來看下SpringMvc連線資料庫。 【SpringMvc】從零開始學SpringMvc之初始化(一) 準備 首先, 需要安裝Mysql、Navicat(或者類似軟體)、有一點sql基礎,瞭解一點
【SpringMvc】從零開始學SpringMvc之初始化(一)
大家好,我們今天開始SpringMvc 這個系列,由於筆者也是安卓出身,對SpringMvc 也是接觸不久,所以,這個系列僅僅只是記錄筆者學習SpringMvc 過程中的心得,如有錯誤,歡迎指正。 在開始之前,我們需要準備一些東西,JDK、Eclipse(MyEclipse)、Tom
【SpringMvc】從零開始學SpringMvc之實現使用者登入(三)
大家好,在前2篇中,我們實現了SpringMvc的配置和資料庫連線,這一篇我們來用html/ajax實現一個簡單的登入功能。 【SpringMvc】從零開始學SpringMvc之初始化(一) 【SpringMvc】從零開始學SpringMvc之資料庫(二) 準
【SpringMvc】從零開始學SpringMvc之實現使用者管理(四)
大家好,在上一篇中,我們實現了使用者登入,這一篇我們來實現使用者的增刪改查。由於在第2篇中,我們已經建立好了資料庫,這裡就不在詳述了。 準備 這裡,我們用到了騰訊的前端模板引擎art-template,不熟悉的小夥伴可以先了解一番,或者有熟悉其他模板引擎的,也
從零開始學Java之五種內部類將執行緒隱藏類中
1.使用普通內部類繼承Thread類 <code class="hljs java has-numbering" style="display: block; padding: 0px; color: inherit; box-sizing: border-box;
從零開始學C++之虛擬函式與多型(一):虛擬函式表指標、虛解構函式、object slicing與虛擬函式、C++物件模型圖
#include <iostream>using namespace std;class CObject {public: virtual void Serialize() { cout << "CObject::Serialize ..." <&
從零開始學Java之單例模式:懶漢模式和飽漢模式
單例模式:單例模式是一種常用的軟體設計模式。在它的核心結構中只包含一個被稱為單例類的特殊類。通過單例模式可以保證系統中一個類只有一個例項而且該例項易於外界訪問,從而方便對例項個數的控制並節約系統資源。
從零開始學C++之IO流類庫(三):檔案的讀寫、二進位制檔案的讀寫、檔案隨機讀寫
#include <cassert>#include <iostream>#include <fstream>#include <string>using namespace std;struct Test { int a; int b; };i
從零開始學Java之出入門衛管理(二)
這個系統包含了四塊,第一塊就是人員管理,經理分配三位分別有“ABC"許可權的人,分別管理請假申請,請假審批,門衛登記管理。同時不屬於本公司的內部人員,如別的公司的人員如果想到本公司訪問,也是先通過這”ABC“許可權的三個人代為寫來訪申請,來訪審批,來訪門衛登記管理
從零開始學Java之 編寫簡單的工程
筆者本人從最初開始接觸C語言、C++、VC++、彙編到後來接觸PHP以及Java,在這些語言的使用過程中深刻感受到這些語言都是相同的編寫思路,程式碼編寫的方式也是大同小異,目前認為Java語言的亮點是package以及反射機制。 package不僅提供
從零開始學Python3之五——模組
from ... import ... 什麼的我就不寫了= =模組的 __name__每個模組都有一個名稱,模組中的語句可以找到它們所處的模組的名稱。當模組第一次被匯入時,它所包含的程式碼將被執行。我們可以通過這一特性來使模組以不同的方式執行,這取決於它是為自己所用還