大家好,又见面了,我是全栈君,祝每个程序员都可以多学几门语言。
响应式设计的还有一个重要技术手段是媒体查询。假设仅仅是简单的设计一个流式布局系统,那么能够保证每一个网格按比例的放大和缩小,但有可能会使得在小屏幕下(如手机设备)网格太小而严重影响阅读,这种设计称不上响应式设计。媒体查询能够来解决这一问题。媒体查询能够为特定的浏览器和设备提供特定的样式。媒体查询是CSS 3的一个新特性,是对媒体类型的扩展。
提示:W3C列出了10种媒体类型,请參考http://www.w3.org/TR/CSS2/media.html#media-types。
在响应式设计中,媒体查询一般在CSS中定义,如最常见的使用方式设置屏幕宽度小于1024px时的样式,代码例如以下:
@media screen and (max-width: 1024px){
// 在这时设置小于1024px时的样式
}
设置屏幕宽度小于600px时的样式,代码例如以下:
@media screen and (max-width: 600px){
// 在这时设置小于600px时的样式
}
设置屏幕宽度在600px~900px之间时的样式,代码例如以下:
@media screen and (max-width: 600px) and(min-width: 900px){
// 设置样式
}
设置设备的实际分辨率小于480px时的样式(如iPhone),代码例如以下:
@media screen and (max-device-width: 480px){
// iPhone手机样式在这里设置
}
设置iPad或iPhone在横向时的样式,代码例如以下:
@media screen and (orientation:landscape){
// 在这时设置样式
}
提示:很多其它关于媒体查询请參考http://www.w3.org/TR/css3-mediaqueries/。
学习HTML5最好的书就是《HTML5网页开发实例具体解释》,用代码学习用案例学习,可比看文字有趣多了!!!一本书搞定HTML5,从如今開始。
发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/118466.html原文链接:https://javaforall.cn
【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛
【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...