概述

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

/* 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. DMS专线联通外网测试

    配置 CE Ping PE: “本地链接”-->属性-->"Internet 协议版本4(TCP/IPv4)",选择“使用下面的IP”,填写“172.16.10.21” ...

  2. 带WIFI模块布局布线要点。

    带WIFI模块布局布线要求: 1: RF底部不能铺铜要挖空不能有GND否则RF信号会被耦合掉从而无法发送出去. 2:WIFI模块下方不能打孔尽量不走线不打孔避开其他信号穿过下方,要整体的铺铜 3:连接 ...

  3. unity中camera摄像头控制详解

    目录 1. 缘起 2. 开发 2.1. 建立项目 2.2. 旋转 2.2.1. 四元数 2.3. 移动 2.3.1. 向量操作 2.4. 镜头拉伸 2.5. 复位 2.6. 优化 1 缘起 我们的产品 ...

  4. 就qq软件的优缺点

    qq对于现在的人来说,可谓是无所不知的,这也使得它迅速融入到人们的生活中,但它也是一把双刃剑,就优缺点我进行一下举例说明: 它的优点:qq由最初设计的一种聊天工具现在已经发展成为一个很全面多用途的工具 ...

  5. ubuntu 12.04下 ns3的下载 安装

    这个的内容我主要是参考了 http://blog.sina.com.cn/s/blog_7ec2ab360102wwsk.html 这个链接的学习,基本上过程没有出现的问题. 就是这个链接少了测试的一 ...

  6. windows32位系统 安装MongoDB

    今天在win7 32位系统下安装 MongoDB 时,遇到了一堆坑,特此笔记. 一.下载MongoDB 打开官网下载地址:https://www.mongodb.com/download-center ...

  7. Unbuntu18.04通过apt源方式安装mysql5.7.22

    Ubuntu18.04在今年4月底发布了,喜欢尝鲜的小伙伴肯定是第一时间就更新了系统版本,那么在Ubuntu18.04中怎么安装msyql5.7(mysql8.0因为新出,再观望一段时间)呢? * 带 ...

  8. js用currentStyle和getComputedStyle获取css样式(非行间) 兼容ie与火狐

    用js的style属性可以获得html标签的样式,但是不能获取非行间样式.那么怎么用js获取css的非行间样式呢?在IE下可以用currentStyle,而在火狐下面我们需要用到getComputed ...

  9. BZOJ1815 SHOI2006有色图(Polya定理)

    置换数量是阶乘级别的,但容易发现本质不同的点的置换数量仅仅是n的整数拆分个数,OEIS(或者写个dp或者暴力)一下会发现不是很大,当n=53时约在3e5左右. 于是暴力枚举点的置换,并且发现根据点的置 ...

  10. java 前台使用枚举方法(一)

    枚举值封装: http://blog.csdn.net/hanjun0612/article/details/72845960 一  基本类型 这里接着说前台调用枚举值. 首先,controller层 ...