@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} }
@media 各大尺寸的更多相关文章
- 【CSS3 入门教程系列】CSS3 Media Queries 实现响应式设计
在 CSS2 中,你可以为不同的媒介设备(如屏幕.打印机)指定专用的样式表,而现在借助 CSS3 的 Media Queries 特性,可以更为有效的实现这个功能.你可以为媒介类型添加某些条件,检测设 ...
- 移动设备上的媒体查询 CSS media queries for mobile device
CSS的媒体查询虽然在传统的互联网页面可能发挥的余地不是很大,但是自从苹果和安卓的风靡之后,移动平台上的web开发变得越来越流行了,同时CSS的媒体查询可谓派上了大用场了. 以下为翻译内容,原文来自这 ...
- Intel Media SDK H264 encoder GOP setting
1 I帧,P帧,B帧,IDR帧,NAL单元 I frame:帧内编码帧,又称intra picture,I 帧通常是每个 GOP(MPEG 所使用的一种视频压缩技术)的第一个帧,经过适度地压缩,做为随 ...
- PhoneGap/cordvoa如何添加Media插件
phonegap由2.7升级到3.7之前,只要引入一个cordova.js,就可以了.现在由于所用的插件,都需要用模块的形式进行按需加载,自然就没有以前那么安逸了. 例如,如果要在安卓平台添加一个音频 ...
- 实践 HTML5 的 CSS3 Media Queries
先来介绍下 media,确切的说应该是 CSS media queries(CSS 媒体查询),媒体查询包含了一个媒体类型和至少一个使用如宽度.高度和颜色等媒体属性来限制样式表范围的表达式.CSS3 ...
- Media Queries
@media screen and (max-device-width: 1920px) and (min-device-width: 1920px) 指定1920分辨率的样式,使用device-wi ...
- CSS3 Media Queries 实现响应式设计
在 CSS2 中,你可以为不同的媒介设备(如屏幕.打印机)指定专用的样式表,而现在借助 CSS3 的 Media Queries 特性,可以更为有效的实现这个功能.你可以为媒介类型添加某些条件,检测设 ...
- CSS3 media 入门
css3 media 严格来说是自适应布局 对不同的屏幕(正确的说应该是) 写不同的css样式.而流式布局 则才算是响应式布局. css3 media 语法: @media mediatype a ...
- 关于媒体查询 @Media Screen 与响应式
其实CSS2中已经有了媒体查询的概念,但是CSS3中媒体查询功能更加的强大! 首先,我们来看一个小例子 设置媒体查询的 Max Width ,改变窗口大小到600px的时候就会触发一下代码: @med ...
随机推荐
- 题解 P3628 【[APIO2010]特别行动队 】
题目大意 给你一个序列, 将这个序列分成若干段, 每一段的贡献为 \(ax ^ 2 + bx + c\)(x 为 这一段的权值之和) 具体思路 50pts 考虑Dp, 设\(Dp_i\)为前i ...
- 暴力攻击 PHP 脚本 初探
考虑下面的HTML表单: CODE: <form action="http://example.org/login.php" method="POST"& ...
- 编写Android工程里测试代码的步骤
第一步: 写个类去继承 AndroidTestCase public class TestStudent extends AndroidTestCase 并且编写一个测试的方法, 注意,测试的方法必须 ...
- android-zip解压缩方法
/** * 解压缩文件到指定的目录. * * @param unZipfileName * 需要解压缩的文件(带路径) * @param mDestPath * 解压缩后存放的路径 **/ publi ...
- java获得当前日期是今年的第几周,以及这周的开始日期的方法
直接上代码,备份使用 时间戳,长整型存储 long startTime1 = 1530613938532l; Calendar cale ...
- elasticsearch(六) 之 elasticsearch优化
目录 elasticsearch 优化 从硬件上 : 从软件上: 从用户使用层 elasticsearch 优化 从硬件上 : 使用SSD 硬盘,解决io导致的瓶颈. 增大内存 但不超过32G(单实例 ...
- 在Linux系统安装Nodejs最简单步骤
一.去官网下载和自己系统匹配的文件 英文网址:https://nodejs.org/en/download/ 中文网址:http://nodejs.cn/download/ 通过 uname -a ...
- PTA (Advanced Level) 1027 Colors in Mars
Colors in Mars People in Mars represent the colors in their computers in a similar way as the Earth ...
- onkeydown事件
<img src="images/hot.jpg" alt="" id="imgId" class="img1"/ ...
- nginx对nodejs服务器的http、https、ws、wss的配置
最新nginx对nodejs服务器的http.https.ws.wss的配置 Linux下nginx配置nodejs服务器 目录 目录 软件版本 话不多说上干货 静态资源配置 反向代理配置 因为 ...