媒体查询移动优先与 PC 优先的区别与联系
16lz
2021-09-25
媒体查询移动优先与 PC 优先的区别与联系
- 移动优先:从最小的屏幕开始媒体查询 ,有小到大
- pc优先:从大屏开始查询,由大屏到小屏
二者在查询过程中都是逐步递进的
移动优先
/*此项用以表示小于480px,屏幕的设置*/
@media (max-width: 480px) {
html {
font-size: 10px;
}
}
@media (min-width: 480px) {
html {
font-size: 12px;
}
}
@media (min-width: 640px) {
html {
font-size: 14px;
}
}
@media (min-width: 720px) {
html {
font-size: 16px;
}
}
pc优先
/* pc优先时,此项不可去,用以表示更大的屏幕的设置 */
@media (min-width: 720px) {
html {
font-size: 18px;
}
}
@media (max-width: 720px) {
html {
font-size: 16px;
}
}
@media (max-width: 640px) {
html {
font-size: 14px;
}
}
@media (max-width: 480px) {
html {
font-size: 12px;
}
}
更多相关文章
- 通过链式调用,将一个类委托给另一个类实现数据库的查询操作
- 补0816:拦截方法封装mysql查询语句
- 参考demo3.php, 完善数据库查询构造器其他的操作,update,delete,i
- 快递100显示查询错误?快递100快递查询类FAQ
- python全国快递查询接口和电子面单打印接口,一次接入全国快递公
- Spring认证_什么是Spring GraphQL?
- php快递查询接口,一次接入顺丰、京东、申通、圆通、韵达、中通、
- 物流查询API在电商行业中最常见的2个用途
- 国内外7款好用的快递物流查询API工具