国内视频手机在线观看-欧美精品视频在线观看第一页-日本高清免费不卡在线-在线观看精品国产-国产精品第12页-欧美日韩亚洲国产欧美电影-日韩欧美亚洲一区精选

新聞中心

• 運(yùn)營(yíng)知識(shí) | 鄭州網(wǎng)站建設(shè)公司為你講解響應(yīng)式 Web 設(shè)計(jì)–媒體查詢

  　　近幾年整個(gè)社會(huì)發(fā)生了翻天覆地的變化，各種智能手機(jī)，pad，之類的移動(dòng)端設(shè)備隨處可見。那么，程序員界就刮起了一陣風(fēng)暴，大家在思考 “ 如何讓我們的網(wǎng)站在各種移動(dòng)端設(shè)備上都能布局合理呢? ”為每一個(gè)設(shè)備寫一套代碼自然是非常麻煩的。那么，聰明的程序員們想到了一個(gè)辦法，“ 我只要一套代碼，就能讓我的網(wǎng)站在不同大小的設(shè)備上正確顯示 ”。于是，響應(yīng)式設(shè)計(jì)模型誕生啦!其核心就是“媒體查詢”技術(shù)。

  　　接下來(lái)，讓我們了解一下，如何實(shí)現(xiàn)一個(gè)網(wǎng)站的響應(yīng)式設(shè)計(jì)

  　　第一、 meta標(biāo)簽

  　　在網(wǎng)頁(yè)的頭部要添加下面一行代碼，看下面的參數(shù)解釋就知道這一行代碼的意思了

  　　<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0,

  user-scalable=no">

  　　width=device-width ： 網(wǎng)頁(yè)寬度等于設(shè)備寬度

  　　initial-scale=1.0 ： 初始縮放比例為1.0 。網(wǎng)頁(yè)初始頁(yè)面的大小占整個(gè)面積的100%

  　　maximum-scale=1.0 ： 最大縮放比例為1.0 ，

  　　user-scalable ： 用戶是否可以手動(dòng)縮放

  　　第二、css語(yǔ)法

  　　實(shí)例

  　　如果文檔寬度小于 300 像素則修改背景顏色(background-color):

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

  　　      body {

  　　            background-color:lightblue;

  　　           }

  　　}

  　　你也可以針對(duì)不同的媒體使用不同 stylesheets :

  　　<link rel="stylesheet" href="mystylesheet.css" media="screen and (max-width:300px)">

  　　到這里就可以簡(jiǎn)單輕松的實(shí)現(xiàn)只要一套代碼，就能讓你的網(wǎng)站在不同大小的設(shè)備上正確顯示!