css自媒体查询
準備工作1：設置Meta標簽
首先我們在使用Media的時候需要先設置下面這段代碼，來兼容移動設備的展示效果：
這段代碼的幾個參數解釋：
-
width = device-width：寬度等于當前設備的寬度
-
initial-scale：初始的縮放比例（默認設置為1.0） ?
-
minimum-scale：允許用戶縮放到的最小比例（默認設置為1.0）? ??
-
maximum-scale：允許用戶縮放到的最大比例（默認設置為1.0）? ?
-
user-scalable：用戶是否可以手動縮放（默認設置為no，因為我們不希望用戶放大縮小頁面）?
準備工作2：加載兼容文件JS
因為IE8既不支持HTML5也不支持CSS3 Media，所以我們需要加載兩個JS文件，來保證我們的代碼實現兼容效果：
準備工作3：設置IE渲染方式默認為最高(這部分可以選擇添加也可以不添加)
現在有很多人的IE瀏覽器都升級到IE9以上了，所以這個時候就有又很多詭異的事情發生了，例如現在是IE9的瀏覽器，但是瀏覽器的文檔模式卻是IE8:
為了防止這種情況，我們需要下面這段代碼來讓IE的文檔模式永遠都是最新的：
不過我最近又發現了一個更給力的寫法：
怎么這段代碼后面加了一個chrome=1，這個Google Chrome Frame（谷歌內嵌瀏覽器框架GCF），如果有的用戶電腦里面裝了這個chrome的插件，就可以讓電腦里面的IE不管是哪個版本的都可以使用Webkit引擎及V8引擎進行排版及運算，無比給力，不過如果用戶沒裝這個插件，那這段代碼就會讓IE以最高的文檔模式展現效果。這段代碼我還是建議你們用上，不過不用也是可以的。
以上內容摘自http://blog.csdn.net/yuzhongkai/article/details/51041937
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title><style>body{background: red}@media screen and (min-width:600px) and (max-width:1200px){body{background: greenyellow} }@media screen and (max-width:600px){body{background: rgb(47, 102, 255)} }/* 頁面寬度大于1200背景紅色 1200-600綠色 小于600藍色 */</style> </head> <body> </body> </html>常用的自媒體查詢樣式
| ?特性名 | 值 | 應用場景 |
| ?width ?min-width ?max-width | ?顯示區域的寬度（對打印機而言是打印表面） | ?改變布局以適應非常窄（如手機）或非常寬的顯示器。 |
| ?height ?min-height ?max-height | ?顯示區域的高度 | ?改變布局以適應非常長或非常短的顯示器 |
| ?device-width ?min-device-width ?max-device-width | ?當前計算機或設備屏幕的寬度 （或打印輸出時紙面的寬度） | ?根據不同設備（如手機）調整布局 |
| ?device-height ?min-device-height ?max-device-height | ?屏幕或紙面的高度 | ?根據不同設備（如手機）調整布局 |
| ?orientation | ?landscape（橫向）或portrait（縱向） | ?根據設備的朝向調整布局 |
| ?device-aspect-ratio ?min-device-aspect-ratio ?max-device-aspect-ratio | ?顯示區域的寬高比（1/1是正方形） | ?根據窗口形狀調整樣式（問題可能比較復雜） |
| ?color ?min-color ?max-color | ?屏幕顏色的位深 （1位表示黑白，目前主流顯示器都是24位） | ?檢查是否支持彩色輸出（比如是不是黑白打印）， ?或者支持的顏色數量 |
?1.css
body{margin: 0;width: 100%; } div{text-align: center;margin: auto } ul{display: flex;list-style: none;justify-content: center;flex-wrap:nowrap } li{line-height: 30px;background: red;width: 300px;margin: 20px;font-size: 30px }?
2.css
body{margin: 0;width: 100%; } div{text-align: center;margin: auto } ul{display: flex;list-style: none;justify-content: center;flex-wrap:wrap } li{line-height: 30px;background: rgb(25, 0, 255);width: 300px;margin: 20px;font-size: 10px }?
?
轉載于:https://www.cnblogs.com/douyaer/p/7856090.html
總結
- 上一篇： ELF文件和BIN文件
- 下一篇： java 将一个非空文件夹拷贝到另一个地