標籤：style blog http color 使用 ar 檔案 sp div
1.使用內聯樣式的用法
在<head>標籤中使用style,使用@media指定對應螢幕解析度大小的樣式
<head lang="en"> <meta charset="UTF-8"> <title>響應式布局樣本</title> <style> @media screen and (min-width: 800px) { body { background-color: red; } } @media screen and (max-width: 800px) { body { background-color: blue;; } } </style></head>
這裡分別使用了2個樣式:當解析度<=800時使用,背景色為blue;當解析度>=800時使用,背景色為red;
2.使用外鏈樣式表的引用
<link href="css/responsive1.css" rel="stylesheet" type="text/css" media="only screen and (min-width:800px)"> <link href="css/responsive2.css" rel="stylesheet" type="text/css" media="only screen and (max-width:800px)">
這裡是指定了在不同解析度下使用不同的CSS檔案,效果和上面的一樣.
3.同樣的在同一個樣式檔案中聲明
<meta name="viewport" content="width = device-width,initial-scale=1"/> <link href="css/responsive.css" rel="stylesheet" type="text/css"/>
body { margin: 0px auto;}@media screen and (max-width: 600px) { body { background: blue; }}@media screen and (min-width: 900px) { body { background: red; }}
這樣只需 在一個檔案裡聲明,對應每個需要設定的樣式可以單獨設定
參考文章http://www.cnblogs.com/lhb25/archive/2012/12/04/css3-media-queries.html
css響應式布局用法
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
