一区自拍_国产成人精品一区二区三区视频_中文字幕观看_亚洲精品电影在线观看_91在线看_国产中文视频

隨著行動(dòng)上網(wǎng)的普及，越來越多的人使用手機(jī)上網(wǎng)。
行動(dòng)裝置的使用率以及黏著度正在超越桌上設(shè)備，成為我們?nèi)粘Ｉ�活中最常接觸的3C用品。于是網(wǎng)頁設(shè)計(jì)產(chǎn)業(yè)面對(duì)了一個(gè)難題，如何才能在不同大小的行動(dòng)設(shè)備上，完美的呈現(xiàn)網(wǎng)頁的內(nèi)容呢？
手機(jī)的屏幕比較小，目前最大的Note分辨率是在640px，而ipad則是在980左右，電腦寬屏幕尺寸是1920。同樣的內(nèi)容要在大小迥異的屏幕上都呈現(xiàn)出好的效果，并不是一件容易達(dá)成的任務(wù)。
有一派的解決方式是為不同的裝置提供不同的網(wǎng)頁，如專門做一個(gè)獨(dú)立的手機(jī)版網(wǎng)頁設(shè)計(jì)。這樣做的確是可以達(dá)到良好的瀏覽效果，但維護(hù)上就必須操作復(fù)數(shù)本版。于是自適應(yīng)網(wǎng)頁（Resposive Web Design）就誕生了。
響應(yīng)式網(wǎng)頁設(shè)計(jì)（Responsive web design），又稱自適應(yīng)網(wǎng)頁設(shè)計(jì)、google稱響應(yīng)式網(wǎng)頁設(shè)計(jì)，是一個(gè)犧牲加載速度的手機(jī)網(wǎng)頁解決方案，

只做一個(gè)版本的設(shè)計(jì)就能通吃所有大小的屏幕，讓網(wǎng)頁調(diào)節(jié)不同大小的分辨率自動(dòng)調(diào)整排版。

CSS3 Media Query
響應(yīng)式網(wǎng)頁設(shè)計(jì)的主要核心技術(shù)是css3 media query，說穿了就是讓不同分辨率去套用不同的css設(shè)定（看起來很簡(jiǎn)單，但會(huì)真的實(shí)作起來要注意的雜事很多）。
我們可以先看看幾個(gè)例子：
Mediaqueri.es這個(gè)網(wǎng)站搜藏了許多案例，而且都有附上對(duì)照?qǐng)D片可以參考（愛貝斯的官網(wǎng)也是屬于自適應(yīng)網(wǎng)頁設(shè)計(jì)）。
從左到右分別是不同的屏幕分辨率所呈現(xiàn)的版面設(shè)計(jì)。在傳統(tǒng)PC中，會(huì)將許多元素并排；在手機(jī)中，會(huì)變成只有一行。

響應(yīng)式
響應(yīng)式

Media Query引用方式
Media Query的使用方式有兩種：
1.在.CSS檔案中，用@media來判斷使用者屏幕寬度，選擇加載哪一段CSS。
ex: @media screen and（max-device-width: 400px）{}
在屏幕小于400px時(shí)，套用此css
2.在HTML的加載的地方，用media屬性判斷使用者裝置寬度，選擇加載哪一個(gè)CSS檔案。
ex: link rel=“stylesheet”type=“text/css”media=“screen and（max-device-width: 400px）”href=“tinyScreen.css”
在屏幕小于400px時(shí)，套用tinyScreen.css
Viewport設(shè)定
meta name=“viewport”content=“width=device-width；initial-scale=1.0”
如果網(wǎng)頁的標(biāo)頭沒有做這組設(shè)定的話，手機(jī)會(huì)以高分辨率來呈現(xiàn)畫面，這就讓字變得很小，使用者還要去做放大而不能直接閱讀。我們需要的是讓行動(dòng)裝置的屏幕來符合一般的像素公式，單位一樣才比較好做設(shè)計(jì)。
基本上只要把握上面兩組設(shè)定的方式就可以開始制作自適應(yīng)網(wǎng)頁了，不過如同一開始講的…很多事情都是做了之后才會(huì)發(fā)現(xiàn)問題的所在（笑）。