【media-queries】媒体查询，为了响应式设计而生
2024-08-31 05:39:29
目录
- 简介
- 语法
- 常用尺寸
一 简介
针对现在纷杂的设备，css3中加入，可以查询你的浏览类型(screen彩色屏幕, print, all)和css属性判断。
最常用的就是查询屏幕大小，给予适合的展示效果，即流行的响应式设计(Responsive Design)。
二 语法
1 简单的例子
@media only screen and (max-width:320px) {
.container {
width:90%;
padding:0 4%;
}
}
前半部分是media-type查询，后面看做是css查询。
2 如果是要大于320小于480像素
@media only screen and (min-width:320px) and (max-width：480px) {
.container {
// style for media(320px < width < 480px)
}
}
3
三 常用尺寸
iphone4 safari视窗高度(window.innerHeight) 356px;
iphone4 weixin视窗高度(打开网页时测算的window.innerHeight) 374px;
iphone5 相关尺寸都加88px就行了。
四 典型实例
五 好的网站收藏
注意：
1 max-width的宽，非屏幕的分辨率宽
买手机的时候，1280*800的像素，跟这里的max-width的像素值不是对应的。 因为android系统会自动进行放大，相当于在屏幕上有一个放大层，一个显示像素点可以有多个像素点组成，所以有的达到1280*800(如魅族mx2)但是不能显示的像1280*800浏览器显示的那么大，但是字体什么的显示的更加清晰。
2 width跟device-width的区别
width称为视口宽度，device-width称为屏幕宽度.
meta的viewport中 width=device-width 即把浏览器宽度设置成屏幕宽度。
最新文章
- JavaScript随笔6
- Java中@Override的作用
- CodeVS 2845 排序的代价
- iebugs产生的原因，zoom：1的作用
- sql 循环语句几种方式
- StringBuild,StringFormat," "+" " 三种方法速度测试
- arm裸机驱动错误总结
- jquery.unobtrusive-ajax.js源码阅读
- oracle安装分析
- redis参考
- 和为S的两个数
- JavaBean,List,Map,json格式之间转化方式
- mongodb监控工具mongostat
- 阿里注册中心nacos使用整合Dubbo-原创
- 第四次：渗透练习，xss学习
- LeetCode练习3 找出一个字符串中最大不重复子字符串的长度
- Scrapy基础(七)————图片的简单下载
- cdnbest自定义错误显示节点名教程
- Real Time Credit Card Fraud Detection with Apache Spark and Event Streaming
- C和C++中的不定参数