CSS media--(来自网易)
概述
通过媒体查询为不同的设备和大小配置不同的样式。
代码展示
/* 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--(来自网易)的更多相关文章
- CSS function--(来自网易)
/* function */ .f-cb:after,.f-cbli li:after{;overflow:hidden;content:".";} .f-cb,.f-cbli l ...
- 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 ...
- 移动设备上的媒体查询 CSS media queries for mobile device
CSS的媒体查询虽然在传统的互联网页面可能发挥的余地不是很大,但是自从苹果和安卓的风靡之后,移动平台上的web开发变得越来越流行了,同时CSS的媒体查询可谓派上了大用场了. 以下为翻译内容,原文来自这 ...
- 深入理解CSS Media媒体查询
× 目录 [1]媒介类型 [2]媒体属性 [3]语法[4]方法 前面的话 一说到响应式设计,肯定离不开媒体查询media.一般认为媒体查询是CSS3的新增内容,实际上CSS2已经存在了,CSS3新增了 ...
- CSS media queries
最近在做一些页面打印时的特殊处理接触到了media queries,想系统学习一下,在MOZILLA DEVELOPER NETWORK看到一篇文章讲的很不错,结合自己的使用总结一下. CSS2/me ...
- [CSS3] CSS Media Queries
Using CSS media queries allows you to design responsive layout in your web apps and website. We will ...
- Web之CSS开发技巧: CSS @media
CSS @media 规则非常适合于将 HTML 或 XML 文档定位为目标输出方法.目前,print 媒体的使用非常普遍,与实现单独的 “可打印版本” 相比,print 提供了更加整洁的方式来创建打 ...
- 一些实用的CSS Media Query代码片段,个人采集
CSS3的出现让响应式Web设计变得简单,CSS3提供了强大的media queries,允许你针对不同的条件设置不同的样式,可以在不修改页面内容的情况下,为不同设备提供不同的样式效果. 以下是一些C ...
- CSS Media媒体查询使用大全,完整媒体查询总结
前面的话 一说到响应式设计,肯定离不开媒体查询media.一般认为媒体查询是CSS3的新增内容,实际上CSS2已经存在了,CSS3新增了媒体属性和使用场景(IE8-浏览器不支持).本文将详细介绍媒体查 ...
随机推荐
- [PLC]ST语言四:INV_MEP_MEF_PLS_PLF_MC_MCR
一:INV_MEP_MEF_PLS_PLF_MC_MCR 说明:简单的顺控指令不做其他说明. 控制要求:无 编程梯形图: 结构化编程ST语言: (*运算结果的反转INV(EN);*) M415:=in ...
- 关于使用单片机读取外部电压ADC阻抗匹配的问题
单片机的基准电压一般为3.3V,如果外部信号超过了AD测量范围,可以采用电阻分压的方法,但是要注意阻抗匹配问题.比如,SMT32的模数输入阻抗约为10K,如果外接的分压电阻无法远小于该阻值,则会因为信 ...
- centos 升级python2.6 到python3.3(实测可行)
http://blog.csdn.net/harith/article/details/17538233
- 第一次Sprint冲刺结果评价
组名 软件项目名称 评价 hzsy 图文转换 这款软件最初的目标是扫描书本上文字转换成电子版,而且也可以将语音转换成文字,但在展示时,没有实现完整的功能,只有简单的界面,看不到更深的实质 ...
- windows8/10+Ubuntu Kylin(优麒麟)双系统
1.参考资料:http://www.jianshu.com/p/2eebd6ad284d 中第三种U盘启动方式安装完成 2.安装过程: (1)首先将一个盘空出来,做好其中数据的备份.启动win+X磁盘 ...
- 重温httpsession①
Session—HTTPSession 服务器创建的,Javaweb提供的 与HTTP协议无关是服务器端对象,保存在服务器端.用来会话跟踪. Cookie与服务器创建,与HTTP协议相关,保存在客户端 ...
- 第二个Sprint冲刺第三天(燃尽图)
- Eclipse导入包提示Setting build path has encountered a problem
Eclipse无法导入jar包时, 提示:“Setting build path” has encountered a problem,Could not write file D:\\workspa ...
- vs安装体验
鉴于vs都是英文,所以安装的时间实在是太长了,经过4个小时终于装完了. 首先要下载和安装Unit Test Generator.步骤为:tools->Extensions and Updates ...
- 基于 Redis 做分布式锁
基于 REDIS 的 SETNX().EXPIRE() 方法做分布式锁 setnx() setnx 的含义就是 SET if Not Exists,其主要有两个参数 setnx(key, value) ...