经常为不同分辨率设备或不同窗口大小下布局错位而头疼,可以利用@media screen实现网页布局的自适应,
优点:无需插件和手机主题,对移动设备友好,能够适应各种窗口大小
只需在CSS中添加@media screen属性,根据浏览器宽度判断并输出不同的长宽值
以下是针对自用主题而写的css,对宽度768以下设备只保留主要文章框架,以便在有限的空间里获得最佳阅读体验
@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} }
相关推荐
Respond.js让不支持css3 Media Query的浏览器包括IE6-IE8等其他浏览器支持媒介查询,亲测可用。(注意:需要大家放到服务器上再使用,不能跨域使用,放到虚拟空间中也可以进行测试,本地测试ie6-8无效果)
@media screen and (max-width:320px){ #talkFooter .editArea{…… } } @media screen and (min-width:321px) and (max-width:375px){ #talkFooter .editArea{…… } } @media screen and (min-width:376px) and ...
css2里面虽然支持@media属性,但是能实现的功能比较少,一般只用做打印的时候做特殊定义的CSS。 @media sMedia { sRules } 1.1、示例 // 设置显示器用字体尺寸 @media screen { BODY {font-size:12pt; } } // ...
H5C3的易错点与@media + rem布局,以及动态图电池和旋转.zip
通用手机端样式: @media all and (orientation : portrait) { /*竖屏*/ } @media all and (orientation : ...@media screen and (min-width: 720px) and (max-width: 960px) {//720 <= xxx < 960>=768的设备
使用css3的@media属性可以实现页面响应式布局,下面有个不错的示例,大家可以参考下
要想实现css屏幕大小自适应,首先得引入 CSS3 @media 媒体查询器: media的使用和规则: ①被链接文档将显示在什么设备上。 ②用于为不同的媒介类型规定不同的样式。 语法: @media 设备名 only (选取条件) ...
css3,html5简单布局
可以使IEie9以下版本支持css3 @Media、让IE支持自适应布局
自适应布局我知道的两种方式 1.使用媒体查询,下面制定了几种适应方式,例如第一个表示屏幕宽度在320px-360px之间的,html字体大小适配为13.65px <style> @media only screen and (max-width: 360px) and ...
CSS3 @media 媒体查询 实例源代码,调整浏览器窗口大小。 当宽度小于300时,背景色变成淡蓝,否则淡绿色 1.用手机浏览:H5移动端app 2.用电脑浏览:宽度大于300,宽度小于300
css3属性@media screen,支持IE8,通常情况下,我们所设置的自适应网页无法在IE8下满足,引用此脚本后在IE8下也能够兼容自适应(注意:放在含有@media screen的css文件下面引用方可有效)。
主要介绍了详解使用CSS3的@media来编写响应式的页面,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
当今屏幕分辨率从320px(iPhone)到2560px(大屏显示器)或者更大。人们也不再仅仅用台式机来浏览网页,现在有手机,平板电脑...用CSS3媒体查询(Mediaquery)来检验屏幕分辨率,如果小于980px,页面宽度将会用自适应来取
定义和使用 使用 @media 查询,你可以针对不同的媒体类型定义不同的样式。 @media 可以针对不同的屏幕尺寸设置不同的样式,特别是如果你...@media screen and (min-width:1000px) and (max-width: 1200px){ .cont_li
最近在做一个自适应布局的项目,所以学了下自适应,下面是总结。此总结只做效果,不关注效率和代码优化。 1.css3 html中添加复制代码代码如下:<meta name=”viewport” content=”width=device-width,target-...
有经验的你肯定知道,当用户竖屏打开时,提示说你要把手机转过来是在是件很傻×的事情。这时如果用户没开启手机里的横屏模式,还要逼用户去开启。这时候用户早就不耐烦了。这篇文章主要介绍了关于移动端页面强制竖屏...