css - 最大高度和最大宽度媒体查询不起作用?
问题描述
我的网站使用引导程序响应宽度,但我也试图让一个部分专门响应横向媒体查询......但是当我进行实时 BrowserSync 时,它没有考虑到我的任何媒体查询请求。 ..任何提示表示赞赏。
在我的 style.scss 中,媒体查询部分是否需要采用特定布局?现在我只是把它放在中间?
@media all and (max-height: 267px) and (max-width: 667px) {
body {
overflow-x: hidden;
}
#header {
.name-tag-image {
width: 400px;
height: auto;
padding-right: 20px;
margin-left: 40px;
padding-top: 75px;
}
.my-name-is-text {
font-size: 1rem;
font-weight: 400;
padding-bottom: 0px;
margin-bottom: -20px;
}
#resume-buttons {
.resume-header-button {
margin-top: 15px;
}
}
.btn-circle.btn-xl {
width: 30px;
height: 30px;
padding: 3px 6px;
font-size: 12px;
line-height: 1.33;
border-radius: 35px;
border: 3px solid #fff;
}
}
}
解决方案
在我的 style.scss 中,媒体查询部分是否需要采用特定布局?
是的,顺序很重要。通常的级联规则适用,所以如果你有
@media all and (max-height: 267px) and (max-width: 667px) {
body {
overflow-x: hidden;
}
...
}
稍后在您的样式表中
body{
overflow-x:visible;
}
然后样式overflow-x:visible;
将应用于所有视口。
此外,267px 的最大高度似乎很低,我认为横向的 iPhone5 将是 320,而大多数较新的智能手机会更高。
祝你好运!
推荐阅读
- opencl - pyinstaller 与 opencl 的使用
- electron - 当 package.json 包含安装后脚本时,为什么 Node 串行端口会失败?
- javascript - 我怎样才能延迟动作,机器人会忽略第二个命令,直到我执行第一个命令?
- c - 嗨,我正在为此硬件编码,使用信号(sigaction,sigprocmask)
- python - 使用 ffmpeg 将 youtube 音频转换为 .mp3:错误:音频转换失败:编码器:Lavc58.91.100 libmp3lame
- arrays - 需要帮助在 perl 中填充结构数组
- amazon-web-services - Terraform 总是说 s3 存储桶策略的模板文件更改
- flutter - 你能改变颤动的文字主题吗?
- javascript - 单击特定按钮时,如何使 div 缓慢滑出(使用 CSS 的转换属性)?
- visualforce - Visualforce 页面上的美国国家选项列表