概述

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

/* 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. PAT甲题题解-1005. Spell It Right (20)-数位求和,水

    把每个位上的数字求和sum,然后以英文单词的形式输出sum的每个位 #include <iostream> #include <cstdio> #include <alg ...

  2. "学霸"系统Alpha版本发布说明

    一.版本功能 我们的软件为学霸app,目标功能为:北航校内学子的类“知乎”应用,可以实现用户的管理.提问.回答.搜索.上传.下载以及交互:当前版本主要实现功能为:用户的管理.提问.回答已经交互. 一下 ...

  3. 审评(HelloWorld团队)

    炸弹人:我觉得炸弹人的构想很不错,很像以前玩的qq堂,不过上课时讲的不够深入,我没有找到项目的思路,项目的介绍也很粗糙,后面说的目标很大,希望你可以实现,我觉得越多的功能,就意味着越多的工作量,总的来 ...

  4. docker简易实践

    docker简易实践 实验环境 操作系统:deepin 15.4 安装步骤 1.安装docker sudo apt-get install docker.io 2.启动docker服务 sudo se ...

  5. SQL Server 删除重复数据只保留一条

    DELETE FROM Bus_TerminalMessage_Keywords WHERE Content IN (select Content from Bus_TerminalMessage_K ...

  6. Visual Studio(VS)C++单元测试

    版权声明:若无来源注明,Techie亮博客文章均为原创. 转载请以链接形式标明本文标题和地址: 本文标题:Visual Studio(VS)C++单元测试     本文地址:http://techie ...

  7. 查看django版本的方法

    在cmd输入: python -m django --version django-admin --version

  8. ecshop ueditor实现百度编辑器

    ecshop后台编辑器替换成ueditor编辑器 投稿:hebedich 字体:[增加 减小] 类型:转载   这篇文章主要介绍了ecshop后台编辑器替换成ueditor编辑器的详细过程,这里推荐给 ...

  9. Graph Database & 图形数据库

    Graph Database 图形数据库 https://en.wikipedia.org/wiki/Graph_database cayley https://github.com/cayleygr ...

  10. php 微信公众号上传永久素材

    <?php namespace Mob\Controller; use Think\Controller; class WxmaterialController extends Controll ...