/* 列印樣式 */
@media print
/* 手機等小螢幕手持裝置 */
@media screen and (min-width: 320px) and (max-width: 480px)
}/* 平板之類的寬度 1024 以下裝置 */
@media only screen and (min-width: 321px) and (max-width: 1024px)
}/* pc客戶端或大螢幕裝置: 1028px 至更大 */
@media only screen and (min-width: 1029px)
}/* 豎屏 */
@media screen and (orientation:portrait) and (max-width: 720px)
/* 橫屏 */
@media screen and (orientation:landscape)
手機、平板裝置螢幕尺寸眾多，寬度不一，寫手機、平板對應css時最好用百分比寬度來自適應各種大小不一的螢幕寬度。這個百分比尺寸不算太難但也不是個太輕便的活，如果你css不熟練的話最好先別折騰這塊，把基礎練好了來。
響應式布局 media詳解
語法 media 型別及功能 指定 查詢使用的 特性。這類似於css屬性，如 max width 960px。css3 說明 指定樣式表規則用於指定的 型別和查詢條件。ie8及以下只能實現css2中的部分，即只可以設定 型別。查詢可以被用在css中的 media和 import規則上，也可以被用在h...
響應式布局的實現 media
好久沒寫響應式頁面了，這個是之前公司的乙個專案。今天開啟了設計文件，按照設計文件的要求大體做了一下。當然裡面是存在細節問題的。如圖 基礎講解見我另一篇部落格 這個效果如何實現呢？當然首選的就是 查詢 media 了 查詢應當怎麼寫呢？css樣式分為 內聯式css樣式 嵌入式css樣式 外部式css樣...
讓IE支援 media 響應式布局
如今的螢幕解析度，小至320px iphone 大到2560px甚至更高 大顯示器 變化範圍極大。除了使用傳統的台式電腦，使用者會越來越多的通過手機 上網本 ipad一類的平板裝置來瀏覽頁面。這種情況下，固定寬度的設計方案將會顯得越發不合理。頁面需要有更好的適應性，其布局結構要做到根據不同的裝置及螢...