響應式:媒介查詢的方式及常見測試特性
阿新 • • 發佈:2018-11-19
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