专栏首页九彩拼盘的叨叨叨Media Queries 写法示例

Media Queries 写法示例

通过 Media Queries,可以给不同的设备设置不同的样式。

设备

屏幕

@media screen {

}

打印机

@media print {

}

屏幕尺寸

手机及更大

@media only screen and (min-width: 320px) {

}

注意:(min-width: 320px) 的括号不能少。

平板及更大

@media only screen and (min-width: 768px) {

}

PC

@media only screen and (min-width: 980px) {

}

小于等于 iphone 4

@media only screen and (max-width:320px) and (max-height: 480px) {

}

屏幕方向

横屏

@media only screen and (orientation : landscape) {

}

竖屏

@media only screen and (orientation : portrait) {

}

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • JavaScript 数组练习题

    ** 题 1:查找数组对象中 age 大于 18 对象 ** 编写函数 filterAdult,满足

    Joel
  • Sass 写法示例

    CSS 本身是非常强大的,但随着样式表变大,变复杂,维护 CSS 变得越来越难。这时候预处理就有用了。Sass 是一种预处理,它能让你使用一些 CSS 中没有的...

    Joel
  • CSS Box Shadow 除了做阴影效果还能做啥

    有意思的是,Box Shadow支持多个值,值之间用,分隔。也就是说,一个元素上可以有任意多个阴影。如果我们只设置阴影的水平和垂直偏移量,不设置模糊距离(默认为...

    Joel
  • 利用@media screen实现网页布局的自适应

    syy
  • 使用VC实现一个“智能”自增减线程池

            工作中接手了一款产品的改造。因为该产品可能使用很多线程,所以产品中使用了线程池。(转载请指明来自BreakSoftware的CSDN博客)

    方亮
  • 隐写机密代码、拷走通用数据,华人“千人计划”专家被FBI逮捕!

    【新智元导读】7月5日,因涉嫌窃取商业秘密,国家“千人计划”专家、通用电气主任工程师(Principal Engineer at GE Power)郑小清被FB...

    新智元
  • JS基础(上)

    JS与DOM的关系 浏览器有渲染html代码的功能,把html源码(如div,p标签等)在内存里形成一个DOM对象 文档对象模型DOM(Document Obj...

    李海彬
  • js中原型(prototype)

    * 每个函数都有一个prototype属性, 它默认指向一个Object空对象(即称为: 原型对象)

    李才哥
  • [每日一题]字符串的比较

    思来想去,相信大家一些基本的语法都差不多了,今天就给大家看一题 题目描述 输入三个字符串,按由小到大的顺序输出 输入 3行字符串 输出 按照从小到大输出成3行...

    编程范 源代码公司
  • 分布式MySQL集群方案

    JavaEdge

扫码关注云+社区

领取腾讯云代金券