以前的用vs code写html的时候,快捷键顺滑的一匹。啥常用的标签都给你生成好了,所以一个粗心的菜鸟,在使用默认的webStrom的时候,遇到了尴尬的事情。
1、首先说一下,媒体的查询中常用的min-width 与 max-width;
min-width,字面意思,最小宽度,就是说,这个样式生效,至少你的分辨率得在这个之下的时候,设置的东西才会生效。
max-width,最大宽度,你设置的东西,得大于这个宽度,样式才会生效。
【css|记录使用@media的尴尬】一般我常用的是定义一个区间,来写不同的样式,毕竟,TM的搞什么玩意,一个手机就那么大,分辨率还那么大的差别,还有ipad这样平板。
定义区间,就会用到一个关键词 and,它是取直接的交集,而不是并集哦。
比如这样
@media screen and (min-width: 300px) and (max-width: 400px){}好的,走到这一步,一般来说都没啥问题了,但是,一看到但是,就是我的踩坑了。
如果没有设置一下meta的属性,那么你会尴尬的发现,你设置的媒体查询根本不鸟你。好了,这就是这次的小项目的踩坑的大概经历了。
推荐阅读
- 前端|axios在vue中的使用
- java|基于 SpringBoot + Vue 的前后端分离的考试系统
- 前端|H5页面前端开发常见的兼容性问题解决方法
- css实现十种现代布局
- 前端|idea如何运行Java Web项目(Servlet、JSP)
- 前端|如何用一行 CSS 实现 10 种现代布局
- Notes|html文字一行时靠右,多行时靠左
- 小程序|微信小程序隐藏滚动条的方法
- 前端|Chrome(谷歌浏览器)安装Vue插件vue-devtools(图文详细教程)