自丟網

 找回密碼
 立即注冊
搜索
查看: 140|回復: 1
打印 上一主題 下一主題

響應式布局@media screen and ( max-width: 像素值 ) {}教程

[復制鏈接]

站長QQ:515138

UID
1
丟幣
54
主題
808
帖子
868
在線時間
415 小時
最后登錄
2019-9-22
跳轉到指定樓層
樓主
發表于 2019-7-3 06:47:21 | 查看: 140|回復: 1 | 只看該作者 回帖獎勵 |倒序瀏覽 |閱讀模式
響應式布局@media screen and ( max-width: 像素值 ) {}教程


設計思路很簡單,首先先定義在標準瀏覽器下的固定寬度(假如標準瀏覽器的分辨率為1024px,那么我們設置寬為980px),然后用Media Query來監測瀏覽器的尺寸變化,當瀏覽器的分辨率小于1024px的時候,則通過Media Query預設的樣式表來將頁面的寬度設置為百分比顯示,這樣子頁面的結構元素就會根據瀏覽器的的尺寸來進行相對應的調整。同理,當瀏覽器的可視區域改變到某個值(假如為650px)的時候,頁面的結構元素根據Media Query預設的層疊樣式表來進行相對應的調整。看看我們的例子:


/* 當瀏覽器的可視區域小于980px */
  1. @media screen and ( max-width: 980px ) {
  2. #wrap {width: 90%; margin:0 auto;}
  3. #content {width: 60%;padding: 5%;}
  4. #sidebar {width: 30%;}
  5. #footer {padding: 8% 5%;margin-bottom: 10px;}
  6. }
復制代碼


/* 當瀏覽器的可視區域小于650px */
  1. @media screen and ( max-width: 650px ) {
  2. #header {height: auto;}
  3. #searchform {position: absolute;top: 5px;right: 0;}
  4. #content {width: auto; float: none; margin: 20px 0;}
  5. #sidebar {width: 100%; float: none; margin: 0;}
  6. }
復制代碼

推薦給好友: [復制鏈接]
上一篇:css文件中調用另一個css文件的方法教程摘要:css文件中調用另一個css文件的方法教程 css文件在同一 ...
下一篇:@media screen實現屏幕自適應內容案例分析詳解教程摘要:@media screen實現屏幕自適應內容案例分析詳解教程 代 ...
樓主熱帖
回復

使用道具 舉報

UID
12
丟幣
9
主題
72
帖子
435
在線時間
10 小時
最后登錄
2019-9-16
沙發
發表于 2019-8-19 22:15:47 | 只看該作者
技術學習教程網,支持一下。
回復

使用道具 舉報

網站地圖|百度統計|免責聲明|Archiver|手機版|小黑屋|ZiDiu.Com ( 粵ICP備17166275號 )

GMT+8, 2019-9-23 02:41 , Processed in 0.171875 second(s), 37 queries .

Powered by Discuz!

© Comsenz Inc.

快速回復 返回頂部 返回列表
鸟叔彩金