media响应式布局模版
2015-08-06 21:59
465 查看
/* 打印样式 */
@media print {
color: red;
}
/* 手机等小屏幕手持设备 */
@media screen and (min-width: 320px) and (max-width: 480px) {
body {
background: yellow;
}
}
/* 平板之类的宽度 1024 以下设备 */
@media only screen and (min-width: 321px) and (max-width: 1024px) {
body {
background: blue;
}
}
/* PC客户端或大屏幕设备: 1028px 至更大 */
@media only screen and (min-width: 1029px) {
body {
background: green;
}
}
/* 竖屏 */
@media screen and (orientation:portrait) and (max-width: 720px) {对应样式}
/* 横屏 */
@media screen and (orientation:landscape){对应样式}
手机、平板设备屏幕尺寸众多,宽度不一,写手机、平板对应css时最好用百分比宽度来自适应各种大小不一的屏幕宽度。这个百分比尺寸不算太难但也不是个太轻便的活,如果你css不熟练的话最好先别折腾这块,把基础练好了来。
还有,用了css媒体查询后,ie6-8载入不了样式表,要引用个:Respond.js来让ie6-8下正确载入css。js自行百度,到处有下载。
@media print {
color: red;
}
/* 手机等小屏幕手持设备 */
@media screen and (min-width: 320px) and (max-width: 480px) {
body {
background: yellow;
}
}
/* 平板之类的宽度 1024 以下设备 */
@media only screen and (min-width: 321px) and (max-width: 1024px) {
body {
background: blue;
}
}
/* PC客户端或大屏幕设备: 1028px 至更大 */
@media only screen and (min-width: 1029px) {
body {
background: green;
}
}
/* 竖屏 */
@media screen and (orientation:portrait) and (max-width: 720px) {对应样式}
/* 横屏 */
@media screen and (orientation:landscape){对应样式}
手机、平板设备屏幕尺寸众多,宽度不一,写手机、平板对应css时最好用百分比宽度来自适应各种大小不一的屏幕宽度。这个百分比尺寸不算太难但也不是个太轻便的活,如果你css不熟练的话最好先别折腾这块,把基础练好了来。
还有,用了css媒体查询后,ie6-8载入不了样式表,要引用个:Respond.js来让ie6-8下正确载入css。js自行百度,到处有下载。
相关文章推荐
- Android布局的小窍门?
- CSS3属性教程与案例分享
- CSS3属性教程与案例分享
- CSS3的calc()使用
- 使用CSS3的appearance属性改变元素的外观
- Web布局连载——两栏固定布局(五)
- CSS3美化图片
- CSS3质感分析——表面线性渐变
- 分析选项卡底部内凹圆角制作
- 细说百度图片栏目——图片展示效果
- 8个实用的响应式设计框架
- 20+ Animation Scripts, Libraries and Plugins
- [div+css]晒晒最新制作专题推广页模板
- 纯CSS制作的新闻网站中的文章列表
- 10条影响CSS渲染速度的写法与使用建议第1/3页
- BS项目中的CSS架构_仅加载自己需要的CSS
- 很不错的 CSS Hack 又学了一招
- 发一个css比较清爽的写法
- CSS expression控制图片自动缩放效果代码[兼容 IE,Firefox]