老师在办公室被躁在线观看,国产成人8x视频一区二区,亚洲欧美日韩国产手机在线

您的位置:首頁 > 新聞資訊 > 行業百科 > 技術百科

響應式設計簡介

作者：龍時間：2018-07-25 瀏覽：

網上的教程好復雜，我寫一個簡版的。

簡單說呢就針對不同的屏幕分辨率應用不同的CSS樣式。比如在電腦、Pad設備上，屏幕比較寬，就可以一行放2個Div。

到了手機上，或者Pad豎著拿的的時候，一行就只放1個Div。

這里有2個關鍵點：

一是如何在不修改Dom結構的前提下調整布局。

二是如何判斷屏幕分辨率并應用對應的CSS。

以上兩點都應該不依賴與JS。

實現第一點依靠的是流式布局。就是所有參與布局的DIV都用float:left，寬度都用百分比表示。比如下圖，黃色部分的寬度是60%，橘色寬度是40%。

如果將黃色和橘色的寬度都width=100%,那么從1行變成2行了，如下圖。從而實現不修改Dom實現布局變化。

那么如何不使用JS而實現動態調整CSS樣式就是第二個關鍵點。

HTML5中提供了一種新的CSS語法——@media，學名是Media Query，可以為不同的分辨率設定不同的樣式。

			 
									1

									2

									3

									4

									5

									6

									7

									8

									/* Phone Portrait (320px) */

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

									#head { width: 100%; }

									#main { width: 100%; }

									#foot { width: 100%; }

									#left { width: 100%; }

									#right { width: 100%; }

									}

上面這段代碼的含義就是當屏幕寬度小于等于320像素時應用大括號中的樣式。下圖是在CSS生效時在瀏覽器中的效果：

@media還有一些更復雜的用法，比如：

			 
									1

									2

									/* Phone Landscape (480px) */

									@media only screen and (min-width: 321px) and (max-width: 480px) and (orientation: landscape) {

這段語句就是針對iPhone橫屏的。即，瀏覽器寬度在321-480像素之間，且方向是“橫向”時生效。

不過自從Retina這中妖艷的屏幕推出，分辨率已經不能代表世界的真相了。小小的Note3的分辨率比一些17“顯示的分辨率還高。

所以還有必要判斷一下設備的像素密度-device-pixel-ratio。

			 
									1

									@media only screen and (-moz-min-device-pixel-ratio: 2), only screen and (-o-min-device-pixel-ratio: 2/1), only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-pixel-ratio: 2)

比如上面的語句就是判斷終端的像素比是2的話，所渲染的樣式。可以適用于iPhone4，iPhone5等設備。

除了上述兩點，還需要在頁面上增加一個viewport的meta標簽，否則在手機上可能會有頁面自動縮放的情況。例如：

			 
									1

									<meta name="viewport" content="width=device-width; initial-scale=1.0">

總結一下：響應式布局有三個關鍵點：

1、流式布局 Liquid Layout

2、Media Query

3、viewport

具體細節就請大家自己研究相關的語法了。

Media Query的語法比較復雜，這里個大家推薦一個工具，可以方便的設計布局，并可以針對各種設備自動生成Media Query的語句：

http://www.responsivewebcss.com/

轉載自AlloyTeam：http://www.alloyteam.com/2014/01/responsive-design/

.

 公司名稱：武漢互贏網絡科技有限公司

　　公司地址：武漢市武昌區靜安路6號創意產業園408室

　　客 服QQ：562257562 848467306

　　咨詢電話：027-89992189

　　業務熱線：15972109576

　　公司網站：www.whtlnet.com

武漢做網站武漢網站建設武漢網站制作武漢網絡公司武漢網站開發武漢建網站

上一篇：微信小程序中自定義組件的使用

下一篇：前端規范之css篇

国产精品一区电影_国产男女无遮挡猛进猛出_日本丰满熟妇videossex8k_中文字幕无码乱人伦,久久综合伊人77777麻豆,亚洲最大在线观看,无码人妻久久一区二区三区app

武漢互贏網絡科技股份有限公司

響應式設計簡介

作者：龍時間：2018-07-25 瀏覽：

Q武漢網站制作:為什么文章質量上去了但是閱讀量卻下來了

Q武漢網站制作:顏色、字體、圖表，這些視覺元素是如何影響用戶體驗的？

Q雙贏系統建站系統，三網同步，建站推廣一步到

武漢互贏網絡

服務范圍

經典案例

新聞資訊

關于我們

国产精品一区电影_国产男女无遮挡猛进猛出_日本丰满熟妇videossex8k_中文字幕无码乱人伦,久久综合伊人77777麻豆,亚洲最大在线观看,无码人妻久久一区二区三区app

武漢互贏網絡科技股份有限公司

響應式設計簡介

作者：龍 時間：2018-07-25 瀏覽：

Q武漢網站制作:為什么文章質量上去了但是閱讀量卻下來了

Q武漢網站制作:顏色、字體、圖表，這些視覺元素是如何影響用戶體驗的？

Q雙贏系統建站系統，三網同步，建站推廣一步到

武漢互贏網絡

服務范圍

經典案例

新聞資訊

關于我們

作者：龍時間：2018-07-25 瀏覽：