如何不使用Bootstrap實現響應式

當你已經完成了無響應的**，做的第一件事是在你的 html 頁面，貼上下面的**到頭部標籤之間。這將設定螢幕按1:1的尺寸顯示，在iphone 和其他智慧型手機的瀏覽器提供**全檢視瀏覽，並禁止使用者縮放頁面。

**的簡單解釋：

第乙個meta

width：控制 viewport 的大小，可以指定的乙個值，如果 600，或者特殊的值，如 device-width 為裝置的寬度（單位為縮放為 100% 時的 css 的畫素）。

height：和 width 對應，指定高度。

initial-scale：初始縮放比，即是頁面第一次載入時的縮放比例。

user-scalable：使用者是否可以手動縮放

maximum-scale：允許使用者縮放到的最大比例

第二個meta

主要用於加強**對ie的相容性，強制ie使用當前本地最新版標準模式渲染或者用chrome核心渲染。

第三個meta

針對手持裝置優化，主要是針對一些老的不識別viewport的瀏覽器

@media 裝置名一 [ only （選取條件） not （選取條件） ] and（裝置選取條件），裝置二

/* 這是匹配橫屏的狀態，橫屏時的css** */
@media all and (orientation :landscape) {}
/* 這是匹配豎屏的狀態，豎屏時的css** */
@media all and (orientation :portrait) {}

@media 裝置型別 and (min-width:200px) {}

/* 常用裝置型別 */all 所有裝置，braille 盲文，embossed 盲文列印，handheld 手持裝置，print 文件列印或列印預覽模式，projection 專案演示幻燈，screen 彩色電腦螢幕，speech 演講，tty 固定字母間距的網格的**，比如電傳打字機，tv 電視。

實際應用三判斷裝置寬高：

/* 寬度大於600px小於960之間時，隱藏footer結構 */
@media all and (min-height:640px) and (max-height:960px) 
}

/* 畫素比為1時，頭部顏色為綠色 */
.header 
@media only screen and (-moz-min-device-pixel-ratio: 1), only screen and (-o-min-device-pixel-ratio: 1), only screen and (-webkit-min-device-pixel-ratio: 1), only screen and (min-device-pixel-ratio:1)  
}

/*當螢幕的寬度大於600小於800時，應用styleb.css*/ /*當螢幕尺寸小於600px時，應用下面的css樣式*/ @media screen and (max-width: 600px)

}

@media screen and (min-width: 1060px) 
#div2 
#div3  
} @media screen and (max-width: 768px) 
#div2   
#div3  
}@media screen and (min-width: 769px)  and (max-width: 1059px)  
#div2  
#div3 
}

下面的 css **將確保影象將永遠不會大於他們的父容器，**非常簡單，適用於大多數**。請注意，ie6 等舊的瀏覽器不支援 max-width 指令。

img

這個方法簡單易行，但是最佳方法是針對不同的響應，設定不同的影象尺寸。

大多數開發人員使用畫素來定義字型的大小。雖然畫素在普通**使用是沒問題的，但是對於響應式**來說應該有響應式的字型。

css3 規範引入了乙個新的單位叫 rem(font size of the root element)，和 em 類相似，但相對於 html 元素來說， rem 更易於使用。

使用如下：

@media (min-width: 640px)  }
@media (min-width:960px)  }
@media (max-width:320px)  }

如何不使用Bootstrap實現響應式

MySQL 如何不使用OFFSET而進行高速分頁

如何使用bootstrap柵格系統？

MySQL 不使用外來鍵約束的實操（二）

如何不使用Bootstrap實現響應式

MySQL 如何不使用OFFSET而進行高速分頁

如何使用bootstrap柵格系統？

MySQL 不使用外來鍵約束的實操（二）

相關推薦