手机的屏幕比较小，宽度通常在600像素以下；PC的屏幕宽度，一般都在1000像素以上（目前主流宽度是1366×768）设置相应的min-width和max-width值 所以响应式设计一般对600px下，1000px上针对各版本做@media细化。 主要 ...

...

效果： ...

@support：用于检测浏览器是否支持CSS某个属性，即条件判断，如果支持某个属性，可以写一套样式，如果不支持某属性，提供另一套样式作为替补。 calc（）：用于计算动态函数值，支持“+”，“-”，“*”，“/”运算 @media：针对不同的媒体类型定义不同的样式 ...

背景： 一次偶然的机会遇到一个朋友在刷css的库其中有这样一道题（css变量如何定义，calc, support, media），我看一眼熟悉而陌生，知其一而不知其二，叔可忍婶不可忍，马上就度娘起来，看一看它的真面目。 一 support 了解到了@support的这个属性，记录下：CSS中 ...

JS组件系列——不容错过的两款Bootstrap Icon图标选择组件 正文 前言：最近好多朋友在群里面聊到bootstrap icon图标的问题，比如最常见的菜单管理，每个菜单肯定需要一个对应的菜单图标，要是有一个可视化的图标选择组件就好了，最好是直接选择图标，就能得到对应的class ...

参考实例:https://cloud.tencent.com/developer/article/1578874 1.在项目setting中具体配置： 2 在url.p ...

一、@media媒体查询用途 媒体查询Media Queries，可以根据不同的设备为其实现不同的样式。@media可以根据不同的屏幕尺寸设置不同的样式，页面布局分别适应移动端、pc端等，在调整浏览器的大小，页面会根据媒体的宽度和高度来重新布置样式。 CSS2中使 ...