@media 各大尺寸

@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} }

时间: 2024-11-11 01:40:49

@media 各大尺寸的相关文章

<转>CSS3 Media Queries 实现响应式设计

在 CSS2 中,你可以为不同的媒介设备(如屏幕.打印机)指定专用的样式表,而现在借助 CSS3 的 Media Queries 特性,可以更为有效的实现这个功能.你可以为媒介类型添加某些条件,检测设备并采用不同的样式表. 例如,你可以把用于大屏幕上显示的样式和用于移动设备的专用样式放在一个样式文档中,这样,在不改变文档内容的情况下,不同的设备可以呈现不同的界面外观.阅读这篇文章学习 CSS3 Media Queries 的基本功能和国外使用 CSS3 的 Media Queries 特性的优秀

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

现在试图解决android平板的屏幕分辨率问题,目前主要想到的办法是采用响应式设计和媒体查询,发现无论使用那种方式,工作量都很大,调试都困难,悲催啊. CSS的媒体查询虽然在传统的互联网页面可能发挥的余地不是很大,但是自从苹果和安卓的风靡之后,移动平台上的web开发变得越来越流行了,同时CSS的媒体查询可谓派上了大用场了. 以下为翻译内容,原文来自这里 非常棒的一篇文章 关于CSS media queries想了解更多,参看这里 如何使用Media Queries媒体查询: 媒体查询就像是一个C

学习——伪类+js实现css3 media queries跨界准确判断

本文转自:http://www.zhangxinxu.com/wordpress/?p=2387 media queries可以让设备在不同尺寸下应用不同的css样式.布局等.以适应手持设备.普屏显示器.宽屏显示器,以及未来冰箱上的联网显示器,汽车上的数码设备等.然后,仅仅通过css做布局可能无法应对所有的交互请求. 举个简单的例子,我们打开浏览器可能处于非最大化状态,此时,如果作为普屏处理,加载的图片可能就是128*128的小尺寸图片.但是,当我们最大化以获得更好阅读体验的时候,需要使用更大尺

移动设备上的媒体查询@media

如何使用Media Queries媒体查询: (1)<head>里边 <link rel="stylesheet" type="text/css" href="xxx.css" media="only screen and (max-device-width:480px)"> (2)style 里边 @media only screen and (max-device-width:480px){/*cs

media 适屏

<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>@media</title> <meta name="hugo" content="" /> <style> .test1, .test2 { display: none; } /* 本条为CSS2部分,IE8及以下只支持本条 *

ORA-01153 an incompatible media recovery is active

ORA-01153错误处理 问题描述: 主备在做Switchover切换时,在切换后的备库报如下错误: ORA-01153: an incompatible media recovery is active 解决办法: 对standby database 进行手动应用archive log SQL> recover managed standby database cancel; SQL> recover automatic standby database ; SQL> RECOVER

Jquery Media插件使用,解决在线预览及打开PDF文件

用到过PDF的媛媛and猿猿们,总会发现这大千世界之万能播放器插件,总能少了对媒体控制的接口. 你总会发现PDF无法像img图片一样正常加载展现出来,那么我们在通用语法的基础上拓展出了适用于预览及打开的PDF插件便于开发应用. 最主要的是使用到了一个jquery的插件jquery.media.js,使用这个插件就很容易实现了. 该插件可以播放多种类型的多媒体文件包括:Flash, Quicktime, Windows Media Player, Real Player, MP3, Silverl

ORA-01113: file xxxx needs media recovery

由于规范存储位置以及存储空间调整缘故需要移动表空间MRP_INDEX2的数据文件,如下所示,首先将表空间MRP_INDEX2脱机; 然后复制数据文件:接着重命名数据文件,最后将表空间MRP_INDEX2联机. 在操作过后,最后一步将表空间MRP_INDEX2联机上线时,出现了意外错误信息,如下所示: SQL> ALTER TABLESPACE MRP_INDEX2 OFFLINE NORMAL;   Tablespace altered.   SQL> !cp /u03/flash_recov

bootstrap-图文混排 media

<!-- media 图文混排 media-left(right) 图片的区域 在左边显示(右边) media-body 内容区域 media-heading 内容区域里的标题 media-middle 图片居中 media-bottom 图片居下 --> <div class="container"> <div class="row" style="width:500px"> <div class=&q