免费的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)


相关推荐

  • git在idea切换远程分支_python git切换分支

    git在idea切换远程分支_python git切换分支想切换到另一个分支的时候,在IDEA的右下角没找到对应的远程分支随即我来到这个地方:项目->git->Repository->pull选择我想要切换的分支原文链接:https://blog.csdn.net/u012898245/article/details/84876094感谢楼主整理提供!…

  • 论文外文文献怎么找_外文文献怎么翻译

    论文外文文献怎么找_外文文献怎么翻译论文参考文献的写作体现了作者对科学研究的态度和对文献作者的尊敬的优良品德,基于java网上购物论文英文的参考文献要怎么写呢?来看看学术参考网的小编整理的文献,希望给大家在写作当中带来帮助。基于java网上购物论文英文的参考文献:[1]刘鑫.基于JSP的网上购物系统研究与设计[D].北京:北京邮电大学,2013:42-43.[2]孔祥盛.MySQL数据库基础与实例教程[M].北京:人民邮电大学出版社…

  • densenet详解_dense参数

    densenet详解_dense参数DenseNet于论文《》中提出,是CVPR2017的oral。论文提出DenseNet并与ResNet和Inception做对较。为提升网络的效果,一般操作是增加网络的深度和宽度,但论文作者另辟蹊径,聚焦于feature的极致利用以获得更佳效果和更少参数。对于梯度消失问题,ResNet等网络使用跳层连接结构加以解决。作者延续该思路,提出DenseBlock,在保证网络层间最大程度的信息传输的同时,直接将所有层连接起来。……………………

  • 请画出下面流程图对应的N-S图以及PAD图_软件设计流程图示例

    请画出下面流程图对应的N-S图以及PAD图_软件设计流程图示例在软件程序设计中,我们通常会用到以下几种图,来帮助我们,分析问题,整理逻辑。我将介绍这四种图的特性,以及区分它们的方法。1.N-S图:也叫盒图,由美国学者I.Nassi和B.Shneiderman提出,所以又称N-S图,可以清晰的表示程序的结构以及流程,其主要特征为“矩形框”。2.PAD图:全称为ProblemAnalysisDiagram,即问题分析图表,利用二维树形结构表示…

  • jsp include参数传送接收与应用

    jsp include参数传送接收与应用jspinclude参数传送接收与应用

  • 负采样的理解[通俗易懂]

    负采样的理解[通俗易懂]我对负采样理解来自于word2vec算法;比如说 love和me两个单词;使用特殊思维模式;假设整个词汇表只有100个单词;love表示成one-hot向量;me表示成one-hot向量;模型输入为love的one-hot向量;模型输出为me的one-hot向量;假设模型的神经网络结构为100*10*100;输出层100个;输出层中除了me对应位置的1外,其他全是0;称…

发表回复

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

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