1. 程式人生 > >響應式:媒介查詢的方式及常見測試特性

響應式:媒介查詢的方式及常見測試特性

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