概述

通过媒体查询为不同的设备和大小配置不同的样式。
代码展示

/* media */
/* 横屏 */
@media screen and (orientation:landscape){ }
/* 竖屏 */
@media screen and (orientation:portrait){ }
/* 窗口宽度<960,设计宽度=768 */
@media screen and (max-width:959px){ }
/* 窗口宽度<768,设计宽度=640 */
@media screen and (max-width:767px){ }
/* 窗口宽度<640,设计宽度=480 */
@media screen and (max-width:639px){ }
/* 窗口宽度<480,设计宽度=320 */
@media screen and (max-width:479px){ }
/* windows UI 贴靠 */
@media screen and (-ms-view-state:snapped){ }
/* 打印 */
@media print{

CSS media--(来自网易)的更多相关文章

  1. CSS function--(来自网易)

    /* function */ .f-cb:after,.f-cbli li:after{;overflow:hidden;content:".";} .f-cb,.f-cbli l ...

  2. CSS reset--(来自网易)

    /* reset */ html,body,h1,h2,h3,h4,h5,h6,div,dl,dt,dd,ul,ol,li,p,blockquote,pre,hr,figure,table,capti ...

  3. 移动设备上的媒体查询 CSS media queries for mobile device

    CSS的媒体查询虽然在传统的互联网页面可能发挥的余地不是很大,但是自从苹果和安卓的风靡之后,移动平台上的web开发变得越来越流行了,同时CSS的媒体查询可谓派上了大用场了. 以下为翻译内容,原文来自这 ...

  4. 深入理解CSS Media媒体查询

    × 目录 [1]媒介类型 [2]媒体属性 [3]语法[4]方法 前面的话 一说到响应式设计,肯定离不开媒体查询media.一般认为媒体查询是CSS3的新增内容,实际上CSS2已经存在了,CSS3新增了 ...

  5. CSS media queries

    最近在做一些页面打印时的特殊处理接触到了media queries,想系统学习一下,在MOZILLA DEVELOPER NETWORK看到一篇文章讲的很不错,结合自己的使用总结一下. CSS2/me ...

  6. [CSS3] CSS Media Queries

    Using CSS media queries allows you to design responsive layout in your web apps and website. We will ...

  7. Web之CSS开发技巧: CSS @media

    CSS @media 规则非常适合于将 HTML 或 XML 文档定位为目标输出方法.目前,print 媒体的使用非常普遍,与实现单独的 “可打印版本” 相比,print 提供了更加整洁的方式来创建打 ...

  8. 一些实用的CSS Media Query代码片段,个人采集

    CSS3的出现让响应式Web设计变得简单,CSS3提供了强大的media queries,允许你针对不同的条件设置不同的样式,可以在不修改页面内容的情况下,为不同设备提供不同的样式效果. 以下是一些C ...

  9. CSS Media媒体查询使用大全,完整媒体查询总结

    前面的话 一说到响应式设计,肯定离不开媒体查询media.一般认为媒体查询是CSS3的新增内容,实际上CSS2已经存在了,CSS3新增了媒体属性和使用场景(IE8-浏览器不支持).本文将详细介绍媒体查 ...

随机推荐

  1. [PLC]ST语言四:INV_MEP_MEF_PLS_PLF_MC_MCR

    一:INV_MEP_MEF_PLS_PLF_MC_MCR 说明:简单的顺控指令不做其他说明. 控制要求:无 编程梯形图: 结构化编程ST语言: (*运算结果的反转INV(EN);*) M415:=in ...

  2. 关于使用单片机读取外部电压ADC阻抗匹配的问题

    单片机的基准电压一般为3.3V,如果外部信号超过了AD测量范围,可以采用电阻分压的方法,但是要注意阻抗匹配问题.比如,SMT32的模数输入阻抗约为10K,如果外接的分压电阻无法远小于该阻值,则会因为信 ...

  3. centos 升级python2.6 到python3.3(实测可行)

    http://blog.csdn.net/harith/article/details/17538233

  4. 第一次Sprint冲刺结果评价

    组名 软件项目名称 评价 hzsy 图文转换        这款软件最初的目标是扫描书本上文字转换成电子版,而且也可以将语音转换成文字,但在展示时,没有实现完整的功能,只有简单的界面,看不到更深的实质 ...

  5. windows8/10+Ubuntu Kylin(优麒麟)双系统

    1.参考资料:http://www.jianshu.com/p/2eebd6ad284d 中第三种U盘启动方式安装完成 2.安装过程: (1)首先将一个盘空出来,做好其中数据的备份.启动win+X磁盘 ...

  6. 重温httpsession①

    Session—HTTPSession 服务器创建的,Javaweb提供的 与HTTP协议无关是服务器端对象,保存在服务器端.用来会话跟踪. Cookie与服务器创建,与HTTP协议相关,保存在客户端 ...

  7. 第二个Sprint冲刺第三天(燃尽图)

  8. Eclipse导入包提示Setting build path has encountered a problem

    Eclipse无法导入jar包时, 提示:“Setting build path” has encountered a problem,Could not write file D:\\workspa ...

  9. vs安装体验

    鉴于vs都是英文,所以安装的时间实在是太长了,经过4个小时终于装完了. 首先要下载和安装Unit Test Generator.步骤为:tools->Extensions and Updates ...

  10. 基于 Redis 做分布式锁

    基于 REDIS 的 SETNX().EXPIRE() 方法做分布式锁 setnx() setnx 的含义就是 SET if Not Exists,其主要有两个参数 setnx(key, value) ...