移動端適配適配方案總結

通過特定的限制，控制不同樣式的呈現；

限制條件最終返回true/false，為真，應用其樣式；

12"
stylesheet
" media="
(max-width: 800px)
" href="
example.css
" />34
5

操作邏輯 - only, and, not

你可以使用邏輯操作符，包括not、and和only等，構建複雜的**查詢。

（1）and操作符用來把多個**屬性組合成一條**查詢，對成鏈式的特徵進行請求，只有當每個屬性都為真時，結果才為真。

//and關鍵字用於合併多個**屬性或合併**屬性與**型別。乙個基本的**查詢，即乙個**屬性與預設指定的all**型別，可能像這樣子：

23 @media (min-width: 700px)

4如果你只想在橫屏時應用這個，你可以使用 and 操作符合併**屬性：

56 (min-width: 700px) and (orientation: landscape)

7現在上面的**查詢僅在可視區域寬度不小於700畫素並在橫屏時有效。如果，你僅想在電視**上應用，你可以使用 and 操作符合併**屬性：

89 @media tv and (min-width: 700px) and (orientation: landscape)

10 現在，上面**查詢僅在電視**上，可視區域不小於700畫素寬度並且是橫屏時有效。

**查詢中使用逗號分隔效果等同於or邏輯操作符。當使用逗號分隔的**查詢時，如果任何乙個**查詢返回真，樣式就是有效的。逗號分隔的列表中每個查詢都是獨立的，乙個查詢中的操作符並不影響其它的**查詢。

//如果你想在最小寬度為700畫素或是橫屏的手持裝置上應用一組樣式，你可以這樣寫：

23 @media (min-width: 700px), handheld and (orientation: landscape) 4//

如上，如果是乙個800畫素寬的螢幕裝置，**語句將會返回真，因為第一部分相當於 @media all and (min-width: 700px) 將會應用於該裝置並且返回真，儘管我的螢幕**型別並不與第二部分的手持**型別相符。同樣地，如果我是乙個500畫素寬的橫屏手持裝置，儘管第一部分因為寬度問題而不匹配，第二部分仍會成功，因此整個**查詢返回真。

（2）not操作符用來對一條**查詢的結果進行取反。not關鍵字僅能應用於整個查詢，而不能單獨應用於乙個獨立的查詢

（3）only操作符僅在**查詢匹配成功的情況下被用於應用乙個樣式，這對於防止讓選中的樣式在老式瀏覽器中被應用到。若使用了not或only操作符，必須明確指定乙個**型別。

1
"stylesheet
" media="
only screen and (color)
" href="
example.css
" />

**特徵：

向所有能顯示顏色的裝置應用樣式表：

2@media all and (color) 34

向每個顏色單元至少有4個位元的裝置應用樣式表：

5 @media all and (min-color: 4)

1 window.onload =function();
6 window.onresize =function();
9function getrem(pwidth,prem)

使用示例：

12"
en">
32627
class="
wrap
">
28class="
title
">首頁
2930
3132

view code

三、移動端適配基礎

1
"viewport
" content="
width=device-width; user-scalable=no
" />

user-scalable=yes/no 是否允許使用者縮放 ios10無效，通過事件解決

移動端適配適配方案總結

移動端適配方案總結

移動端適配方案

移動端適配方案

移動端適配 適配方案總結

移動端適配方案總結

移動端適配方案

移動端適配方案

相關推薦

移動端適配適配方案總結