免费的HTML5连载来了《HTML5网页开发实例具体解释》连载(六)媒体查询

免费的HTML5连载来了《HTML5网页开发实例具体解释》连载(六)媒体查询

大家好,又见面了,我是全栈君,祝每个程序员都可以多学几门语言。

响应式设计的还有一个重要技术手段是媒体查询。假设仅仅是简单的设计一个流式布局系统,那么能够保证每一个网格按比例的放大和缩小,但有可能会使得在小屏幕下(如手机设备)网格太小而严重影响阅读,这种设计称不上响应式设计。媒体查询能够来解决这一问题。媒体查询能够为特定的浏览器和设备提供特定的样式。媒体查询是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,从如今開始。

免费的HTML5连载来了《HTML5网页开发实例具体解释》连载(六)媒体查询

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/118466.html原文链接:https://javaforall.cn

【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛

【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

(0)
blank

相关推荐

  • 前端面试题 vue_vue面试题必问

    前端面试题 vue_vue面试题必问1.自我介绍2分钟,200-300个字,主旨自己基本情况,工作经历,优点,兴趣爱好,职业规划,邀约2.vue面试题1.v-show和v-if区别的区别:v-show通过cssdisplay控制显示和隐藏,v-if组件真正的渲染和销毁,而不是显示和隐藏,频繁切换状态使用v-show否则v-if2.为何v-for要用key快速查找到节点,减少渲染次数,提升渲染性能3.描述vue组件声明周期mm单组件声明周期图挂载:beforeCreate=>created=

  • 微软邮箱设置smtp_邮件服务器怎么设置

    微软邮箱设置smtp_邮件服务器怎么设置配置SMTP服务器和自定义警报和反馈请求电子邮件09/01/2016本文内容AzureDevOpsServer2020|AzureDevOpsServer2019|TFS2018-TFS2013备注AzureDevOpsServer以前名为VisualStudioTeamFoundationServer。若要使用反馈请求和警报,你必须为Azure…

  • Java后端学习路线图,你真的只需要这一张!

    Java后端学习路线图,你真的只需要这一张!原文链接前言学习路线图往往是学习一样技术的入门指南。网上搜到的Java学习路线图也是一抓一大把。今天我只选一张图,仅此一图,足以包罗Java后端技术的知识点。所谓不求最好,但求最全,学习Java后端的同学完全可以参考这张图进行学习路线安排。当然,有一些知识点是可选的,并不是说上面有的你都要会啦。我在复习秋招的过程中就是基于此图进行复习的,感觉效果还是不错的。闲言少叙,我们还…

  • createmutex函数参数含义_pthread_create函数

    createmutex函数参数含义_pthread_create函数CreateMutexCreateMutex函数的作用是找出当前系统是否已经存在指定进程的实例,如果没有则创建一个互斥体。//VC声明HANDLECreateMutex(LPSECURITY_ATTRIBUTESlpMutexAttributes,//指向安全属性的指针BOOLbInitialOwner,//初始化互斥对象的所有者LPCTSTRlpName//指向互斥对象名的指针);一个应用:HANDLEhMutex;hMutex=CreateMutex(

  • SQLserver字符串转日期_sqlserver合并字符串

    SQLserver字符串转日期_sqlserver合并字符串框架用的是mybatis。sqlserver:CONVERT(datetime,#{transaction_date_time},20), mysql: DATE_FORMAT(#{transaction_date_time},’%Y-%m-%d%H:%i:%S’)

  • python保存图片的常用方法

    保存图片的常用方法1.PIL的保存图片方法path=r”./001.jpg”#图片路径img=Image.open(path)#打开图片img.save(“1.jpg”)#将图片保存为1.jpg2.opencv保存图片path=r”./001.jpg”#图片路径#img=cv.imdecode(np.fromfile(“动漫人物_0.jpg”,np.uint8))#含有中文路径的图片打开img=cv2.imread(path)#读

发表回复

您的电子邮箱地址不会被公开。

关注全栈程序员社区公众号