由于現在的網頁要兼容各種pc尺寸及ipad甚至手機屏幕，所以響應式的網頁變得尤為重要。手寫響應式網頁，具體技術點有：

1.聲明viewport元標簽（響應式網頁必備）
? ?? ? <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
? ?? ? width - viewport的寬度 height - viewport的高度
? ?? ? initial-scale - 初始的縮放比例
? ?? ? minimum-scale - 允許用戶縮放到的最小比例
? ?? ? maximum-scale - 允許用戶縮放到的最大比例
? ?? ? user-scalable - 用戶是否可以手動縮放

2.頁面中的圖片都要用響應式圖片 如:
? ?? ???img{width:50% (該圖片在父元素中的占比) max-width:50%;(在父容器中的占比，并且不能超過圖片自身的大小--防止圖片無限放大產生失真)}?

3.使用流式布局（布局元素使用浮動或行內快）

4.避免使用絕對尺寸如px，使用相對單位em或rem；
? ?? ???em：相對于父元素的字體大小
? ?? ???rem：相對于根目錄的字體大小

5.使用CSS3MediaQuery技術（最重點）
? ?? ???Media：指瀏覽網頁的設備，如：screen(pc/pad/phone/watch/print/tv/projection/tty(針式打印機/cmd)/braille(讀屏軟件)...)
? ?? ???MediaQuery：查詢出當前瀏覽設備類型、分辨率、色彩深度、方向(landscape/portait)等等特性。
? ?? ???CSS3 MediaQuery：根據當前瀏覽設備的特性有選擇性執行某些CSS樣式，而忽略其他一些樣式。
? ?? ? 具體做法有兩種：
? ?? ? 1.有選擇性的執行某些外部CSS文件?
? ?? ?? ?<link media="screen and (min-width:768px) and (max-width:991px)" rel="stylesheet" href="css/pad.css"/>
? ?? ?? ?特點：只有媒體查詢結果為真的外部樣式文件才會被執行，否則不執行！不足：即使不符合當前瀏覽設備的外部樣式文件，也會被瀏覽器請求！?
? ?? ? 2.有選擇性的執行某段CSS中的部分樣式
? ?? ?? ? @media screen and (min-width:768px) and (max-width:991px) {
? ?? ?? ?? ?? ???.box {
? ?? ?? ?? ?? ?? ?? ? margin: 6px;
? ?? ?? ?? ?? ?? ?? ???...
? ?? ?? ?? ?? ?? ?? ? }
? ?? ?? ?? ?}?

轉載于:https://www.cnblogs.com/bugo/p/9161667.html

總結

以上是生活随笔為你收集整理的响应式网页之媒体查询的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。