link標籤

<link rel='stylesheet' type='text/css' media='screen and (orientation:portrait) and (min-width:800px)' href='portrait-screen.css' /> 

css檔案內引入其他樣式表

@import ulr('phone.css') screen and (max-width:360px);

 直接在css檔案中寫判斷邏輯

@media (min-wdith:320px){
    p{font-size:16px}
}
@media (min-width:640px){
    p{font-size:20px}
}
@media (min-width:1200px){
    p{font-size:25px}
}
@media (min-width:1500px){
    p{font-size:32px}
}
 

 常用可供測試的特性：

 width：視口寬度

height：適口高度

orientation：裝置方向

color：顏色位深，如min-color: 16表示至少16位深

resolution：螢幕或列印解析度，如min-resolution: 300dpi 或 118dpcm