Media Queries详细

1
2
@media only screen and (max-device-width: 480px) { //页面最大宽度480px
}
1
<link rel="stylesheet" type="text/css" media="only screen and (max-device-width: 480px)" href="small-device.css" /> //外链式

  

1
2
@media only screen and (min-width:480px) and (max-width : 768px){ //480 < x < 768
}

device-aspect-ratio可以用来适配特定屏幕长宽比的设备,这也是一个很有用的属性,比如,我们的页面想要对长宽比为4:3的普通屏幕定义一种样式,然后对于16:9和16:10的宽屏,定义另一种样式,比如自适应宽度和固定宽度:  

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
/* for 4:3 screen */
@media only screen and (device-aspect-ratio:4/3){
}
   
/* for 16:9 and 16:10 screen */
@media only screen and (device-aspect-ratio:16/9) and (device-aspect-ratio:16/10){
}
 
/* for 480px*800px width screen Nexus One和Desire等手机 */
@media only screen and (device-aspect-ratio:5/3){
}
 
/* retina分辨率 */
@media only screen and (-webkit-min-device-pixel-ratio: 2){
}
posted @   Joerias  阅读(215)  评论(0编辑  收藏  举报
编辑推荐:
· 智能桌面机器人:用.NET IoT库控制舵机并多方法播放表情
· Linux glibc自带哈希表的用例及性能测试
· 深入理解 Mybatis 分库分表执行原理
· 如何打造一个高并发系统?
· .NET Core GC压缩(compact_phase)底层原理浅谈
阅读排行:
· 手把手教你在本地部署DeepSeek R1,搭建web-ui ,建议收藏!
· 新年开篇:在本地部署DeepSeek大模型实现联网增强的AI应用
· Janus Pro:DeepSeek 开源革新,多模态 AI 的未来
· 互联网不景气了那就玩玩嵌入式吧,用纯.NET开发并制作一个智能桌面机器人(三):用.NET IoT库
· 【非技术】说说2024年我都干了些啥
点击右上角即可分享
微信分享提示