新聞中心
運營知識 | 鄭州網(wǎng)站建設公司為你講解響應式 Web 設計–媒體查詢
近幾年整個社會發(fā)生了翻天覆地的變化,各種智能手機,pad,之類的移動端設備隨處可見。那么,程序員界就刮起了一陣風暴,大家在思考 “ 如何讓我們的網(wǎng)站在各種移動端設備上都能布局合理呢? ”為每一個設備寫一套代碼自然是非常麻煩的。那么,聰明的程序員們想到了一個辦法,“ 我只要一套代碼,就能讓我的網(wǎng)站在不同大小的設備上正確顯示 ”。于是,響應式設計模型誕生啦!其核心就是“媒體查詢”技術。
接下來,讓我們了解一下,如何實現(xiàn)一個網(wǎng)站的響應式設計
第一、 meta標簽
在網(wǎng)頁的頭部要添加下面一行代碼,看下面的參數(shù)解釋就知道這一行代碼的意思了
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0,
user-scalable=no">
width=device-width : 網(wǎng)頁寬度等于設備寬度
initial-scale=1.0 : 初始縮放比例為1.0 。網(wǎng)頁初始頁面的大小占整個面積的100%
maximum-scale=1.0 : 最大縮放比例為1.0 ,
user-scalable : 用戶是否可以手動縮放
第二、css語法
實例
如果文檔寬度小于 300 像素則修改背景顏色(background-color):
@media screen and (max-width: 300px) {
body {
background-color:lightblue;
}
}
你也可以針對不同的媒體使用不同 stylesheets :
<link rel="stylesheet" href="mystylesheet.css" media="screen and (max-width:300px)">
到這里就可以簡單輕松的實現(xiàn)只要一套代碼,就能讓你的網(wǎng)站在不同大小的設備上正確顯示!