CSS3 Media Queries 特性的妙用

第一招：

在網頁中，pixel與point比值稱為

device-pixel-ratio，普通裝置都是1，iphone 4是2，有些android機型是1.5。

那麼-webkit-min-device-pixel-ratio:2

可以用來區分iphone(4/4s/5)和其它的手機

iphone4/4s的解析度為640*960 pixels，dpi為是326，裝置高度為480px

iphone5的解析度為640*1136 pixels，dpi依然是326，裝置高度為568px

那麼我們只需要判斷iphone手機的device-height(裝置高)值即可區別iphone4和iphone5

使用css

通過 css3 的 media queries 特性，可以寫出相容iphone4和iphone5的**~~

方式一，直接寫到樣式裡面

@media (device-height:480px) and (-webkit-min-device-pixel-ratio:2)}

@media (device-height:568px) and (-webkit-min-device-pixel-ratio:2)}

方式二，鏈結到乙個單獨的樣式表，把下面的**放在標籤裡

使用js

//通過高度來判斷是否是iphone 4還是iphone 5

isphone4inches = (window.screen.height==480
);isphone5inches = (window.screen.height==568);

移動開發發展飛猛，各種新的裝置也不斷的出現，我們在向後相容的同時，也需要不斷術向前學習，趕上時代步伐~

iphone 5 and ios 6 for html5 developers, a big step forward: web inspector, new apis and more

在iphone 4上為視網膜顯示屏優化網頁

第二招有些時候，我們做手機端的時候不得不考慮橫屏的瀏覽效果。而大多數情況下橫屏的style都被無視掉了，可我們把醜陋的一面暴露出來真的好嗎？

於是，我想到了下面的方法：

@media screen and (orientation:portrait) /*

提示豎屏隱藏 */}
@media screen and (orientation:landscape) /*
橫屏狀態 隱藏的內容
*/#tips/*
提示豎屏顯示 
*/}

豎屏才是最佳瀏覽體驗

純css打造，你！值得擁有！

CSS3 CSS3外輪廓屬性

外輪廓outline在頁面中呈現的效果和邊框border呈現的效果極其相似，但和元素邊框border完全不同，外輪廓線不占用網頁布局空間，不一定是矩形，外輪廓是屬於一種動態樣式，只有元素獲取到焦點或者被啟用時呈現。outline屬性早在css2中就出現了，主要是用來在元素周圍繪製一條輪廓線，可以起到...

css3 css的3種引入方式

你好！這是你第一次使用css所需要了解的知識點。如果你想學習如何使用css,可以仔細閱讀這篇文章，了解一下css的基本語法知識。css的引入方式共有三種 行內樣式 內部樣式表 外部樣式表。使用style屬性引入css樣式。示例 直接在html標籤中設定的樣式 實際在寫頁面時不提倡使用，在測試的時候可...

css3新動 CSS3 動畫

注意 1 animation play state 也是 animation 的簡寫屬性，但在 webkit 中不適用 animation myfirst 5s infinite linear paused 即 animation name myfirst animation duration 5s...