摘要:移動(dòng)端屏幕圖片模糊圖標(biāo)是設(shè)備是的屏,那么你得準(zhǔn)備一個(gè),分辨率是,這么寫這個(gè)也很關(guān)鍵設(shè)置倍圖為倍圖大小或者上面的代碼,就能實(shí)現(xiàn)在屏幕密度為的情況下加載屏幕密度為時(shí)加載。
移動(dòng)端Retina屏幕圖片模糊
//圖標(biāo)icon.png是16x16, 設(shè)備是2x的Retina屏,那么你得準(zhǔn)備一個(gè)[email protected],分辨率是32x32,這么寫 .demo{ background-image: url(images/icon.png); } @media only screen and (-webkit-min-device-pixel-ratio: 2),only screen and (min--moz-device-pixel-ratio: 2),only screen and (-o-min-device-pixel-ratio: 2/1),only screen and (min-device-pixel-ratio: 2) { .demo { background-image: url(images/[email protected]); background-size: 16px 16px; //這個(gè)也很關(guān)鍵--設(shè)置2倍圖為1倍圖大小 } //或者 //上面的代碼,就能實(shí)現(xiàn)在屏幕密度為1x的情況下加載image-128.png, 屏幕密度為2x時(shí)加載image-256.png。讓圖文不可復(fù)制
-webkit-user-select: none; -ms-user-select: none; -moz-user-select: none; -khtml-user-select: none; user-select: none;去除蘋果手機(jī)自帶樣式
/*強(qiáng)制去除表單自帶的樣式*/ input,button,select,textarea{outline:none;-webkit-appearance:none;} /*強(qiáng)制去除textarea自帶的樣式*/ textarea{resize:none;-webkit-appearance:none;}清除浮動(dòng),兼容ie6
.clearfix{ zoom: 1; } .clearfix:after{ clear: both; content: " "; display: block; font-size: 0; line-height: 0; visibility: hidden; width: 0; height: 0; }垂直水平居中
position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);內(nèi)容垂直居中
.container { min-height: 6.5em; display: table-cell; vertical-align: middle; }CSS3全屏背景
html { background: url("images/bg.jpg") no-repeat center center fixed; background-size: cover; }ie hack
selector { property: value; /* 所有瀏覽器 */ property: value9; /* 所有IE瀏覽器 */ property: value