南宁企业网站设计,页面布局,wordpress如何设置标题字的大小,php学院网站源码本文主要介绍 media 查询的使用。通过媒体查询#xff0c;在不同的屏幕尺寸下#xff0c;可以设置不同的样式。以此#xff0c;可以完美解决不同屏幕适配的问题。话不多说#xff0c;先来看看效果#xff1a;CSSmedia screen and (max-width: 400px) {.btn {background-co… 本文主要介绍 media 查询的使用。通过媒体查询在不同的屏幕尺寸下可以设置不同的样式。以此可以完美解决不同屏幕适配的问题。话不多说先来看看效果CSSmedia screen and (max-width: 400px) { .btn { background-color: lightblue; }}media screen and (min-width: 400px) and (max-width: 800px) { .btn { background-color: yellowgreen; }}media screen and (min-width: 800px) { .btn { background-color: orangered; }}.btn { width: 100%; height: 60px; border: none; outline: none;}解析将大大小小的屏幕尺寸划分为连续的几个宽度区间在各个宽度区间内设置各自的元素属性。这样在不同宽度的屏幕上媒体查询会根据具体的屏幕尺寸适配到对应的区间来应用此区间内的元素属性达到适配不同屏幕的效果。高度同样可以适配这时想想使用 bootstrap 时用到的 xs、sm、md、lg有木有恍然大悟的感觉 ^_^附言有同学问到说要源码在公众号“关于”菜单栏里面有介绍的。这里再和大家分享一下https://github.com/nanzhangren/CSS_skills
