概述

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

/* 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. Hadoop框架

    1.Hadoop的整体框架 Hadoop由HDFS.MapReduce.HBase.Hive和ZooKeeper等成员组成,其中最基础最重要元素为底层用于存储集群中所有存储节点文件的文件系统HDFS( ...

  2. unity物理检测的几种方式

    (由于本人大多做2d游戏,因此以下以2d为主介绍,但是具体和3d相差不大) 在unity中有很多不同的物理检测方式,但是大致可以分为以下几种: 1.Physics2d检测系列 Physics2d.Li ...

  3. Unity 图文重现官方教程视频 2droguelike 第一集

    初衷: 本人初学Unity,四处收集了一些视频和教材,学习和摸索了一段时间, 我发现官网教程简单易上手,只不过他是英文讲解不方便,我就想把他翻译翻译吧, 然后我又发现看视频学习要暂停回放好多遍,麻烦, ...

  4. 前端常见算法面试题之 - 二维数组中的查找[JavaScript解法]

    --------------------- 作者:吴潇雄 来源:CSDN 原文:https://blog.csdn.net/weixin_43439741/article/details/835118 ...

  5. 作业要求20160901 从edu.cnblogs.com中抄过来的,备忘

    [已完成] 杨贵福 发布于 2016-09-01 21:51 开通技术博客,博客园 cnblogs 关注 杨贵福 younggift,回贴 "构建之法东北师大站,继续 2016秋" ...

  6. someday团队Postmortem(事后诸葛亮会议)

    一.会议相关介绍: 时间:2018年1月12日 地点:第九实验楼五楼机房 参会人员:someday团队全体成员 二.每个成员在beta阶段的实践和alpha阶段有何改进? (一)设想和目标: 我们的软 ...

  7. 用prop还是attr

    jquery中attr和prop的区别   在高版本的jquery引入prop方法后,什么时候该用prop?什么时候用attr?它们两个之间有什么区别?这些问题就出现了. 关于它们两个的区别,网上的答 ...

  8. Redis分布式锁的实现

    前段时间,我在的项目组准备做一个类似美团外卖的拼手气红包[第X个领取的人红包最大],基本功能实现后,就要考虑这一操作在短时间内多个用户争抢同一资源的并发问题了,类似于很多应用如淘宝.京东的秒杀活动场景 ...

  9. Postgresql迁移数据文件存放位置

    1. POSTGRESQL的安装 centos7 里面默认的pgsql的版本是 如果想用更高的版本需要执行以下如下的命令 rpm -ivh https://download.postgresql.or ...

  10. golang yaml配置文件解析

    yaml文件语法 此模块内容转自:http://www.ruanyifeng.com/blog/2016/07/yaml.html 大小写敏感 使用缩进表示层级关系 缩进时不允许使用Tab键,只允许使 ...