@media screen and (min-width:1200px){ #page{ width: 1100px; }#content,.div1{width: 730px;}#secondary{width:310px} }

@media screen and (min-width: 960px) and (max-width: 1199px) { #page{ width: 960px; }#content,.div1{width: 650px;}#secondary{width:250px}select{max-width:200px} }

@media screen and (min-width: 768px) and (max-width: 959px) { #page{ width: 900px; }#content,.div1{width: 620px;}#secondary{width:220px}select{max-width:180px} }

@media only screen and (min-width: 480px) and (max-width: 767px){ #page{ width: 450px; }#content,.div1{width: 420px;position: relative; }#secondary{display:none}#access{width: 450px; }#access a {padding-right:5px}#access a img{display:none}#rss{display:none}#branding #s{display:none} }

@media only screen and (max-width: 479px) { #page{ width: 300px; }#content,.div1{width: 300px;}#secondary{display:none}#access{width: 330px;} #access a {padding-right:10px;padding-left:10px}#access a img{display:none}#rss{display:none}#branding #s{display:none}#access ul ul a{width:100px} }

@media 各大尺寸的更多相关文章

  1. 【CSS3 入门教程系列】CSS3 Media Queries 实现响应式设计

    在 CSS2 中,你可以为不同的媒介设备(如屏幕.打印机)指定专用的样式表,而现在借助 CSS3 的 Media Queries 特性,可以更为有效的实现这个功能.你可以为媒介类型添加某些条件,检测设 ...

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

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

  3. Intel Media SDK H264 encoder GOP setting

    1 I帧,P帧,B帧,IDR帧,NAL单元 I frame:帧内编码帧,又称intra picture,I 帧通常是每个 GOP(MPEG 所使用的一种视频压缩技术)的第一个帧,经过适度地压缩,做为随 ...

  4. PhoneGap/cordvoa如何添加Media插件

    phonegap由2.7升级到3.7之前,只要引入一个cordova.js,就可以了.现在由于所用的插件,都需要用模块的形式进行按需加载,自然就没有以前那么安逸了. 例如,如果要在安卓平台添加一个音频 ...

  5. 实践 HTML5 的 CSS3 Media Queries

    先来介绍下 media,确切的说应该是 CSS media queries(CSS 媒体查询),媒体查询包含了一个媒体类型和至少一个使用如宽度.高度和颜色等媒体属性来限制样式表范围的表达式.CSS3 ...

  6. Media Queries

    @media screen and (max-device-width: 1920px) and (min-device-width: 1920px) 指定1920分辨率的样式,使用device-wi ...

  7. CSS3 Media Queries 实现响应式设计

    在 CSS2 中,你可以为不同的媒介设备(如屏幕.打印机)指定专用的样式表,而现在借助 CSS3 的 Media Queries 特性,可以更为有效的实现这个功能.你可以为媒介类型添加某些条件,检测设 ...

  8. CSS3 media 入门

    css3 media  严格来说是自适应布局 对不同的屏幕(正确的说应该是) 写不同的css样式.而流式布局 则才算是响应式布局. css3 media  语法: @media mediatype a ...

  9. 关于媒体查询 @Media Screen 与响应式

    其实CSS2中已经有了媒体查询的概念,但是CSS3中媒体查询功能更加的强大! 首先,我们来看一个小例子 设置媒体查询的 Max Width ,改变窗口大小到600px的时候就会触发一下代码: @med ...

随机推荐

  1. 使用sqlyog连接到服务器数据库,实现可视化数据操作。(完美解决版。)《亲测!!!!》

      服务器中的表 select Host ,User ,Select_priv ,Insert_priv ,Update_priv ,Delete_priv ,Create_priv ,Drop_pr ...

  2. (转)MySQL日志管理

    MySQL 服务器上一共有六种日志:错误日志,查询日志,慢查询日志,二进制日志,事务日志,中继日志. 原文:https://segmentfault.com/a/1190000003072237 一 ...

  3. python的字符串内建函数(方法)

    原本总结一下,后来发现这个里面讲的很全,可以点进去参考:http://www.runoob.com/python/python-strings.html

  4. Spring Security构建Rest服务-1204-Spring Security OAuth开发APP认证框架之Token处理

    token处理之一基本参数配置 处理token时间.存储策略,客户端配置等 以前的都是spring security oauth默认的token生成策略,token默认在org.springframe ...

  5. JDK1.10+scala环境的搭建之linux环境(centos6.9)

    ---恢复内容开始--- 第一步:安装jdk1.10版本 进入网页 http://oracle.com/technetwork/java/javase/downloads/index.html  下载 ...

  6. Android RecyclerView的使用

    RecyclerView是什么? RecyclerView是一种新的视图组件,目标是为任何基于适配器的视图提供相似的渲染方式.它被作为ListView和GridView控件的继承者,在最新的suppo ...

  7. Linux用户权限规范 /etc/sudoers文件解释

    # User privilege specification root ALL=(ALL) ALL # Members of the admin group may gain root privile ...

  8. tensorflow model save and restore

    TensorFlow 模型保存/载入 我们在上线使用一个算法模型的时候,首先必须将已经训练好的模型保存下来.tensorflow保存模型的方式与sklearn不太一样,sklearn很直接,一个skl ...

  9. The version of SOS does not match the version of CLR you are debugging; SOS.dll版本不匹配; Dump文件不同环境mscordacwks.dll版本问题

    The version of SOS does not match the version of CLR you are debugging 和 PDB symbol for clr.dll not ...

  10. VF

    VF 描述 Vasya is the beginning mathematician. He decided to make an important contribution to the scie ...