gpt4 book ai didi

html - 响应式 css 总是应用横向

转载 作者:太空宇宙 更新时间:2023-11-04 11:47:41 24 4
gpt4 key购买 nike

我试图理解为什么我的 css 总是在横向应用 h1 字体大小而不是纵向应用 h1 字体大小(我是响应式设计的菜鸟)。

有人知道我做错了什么吗?

谢谢!

纪尧姆**** 编辑的新版本:现在可用。

/* FOR MOBILE */
@media only screen
and ( max-device-width: 736px){
.coursBox1{
/* Useless CSS */
}
.coursBox1 h1{
/* Useless CSS */
}
}
@media only screen
and ( max-device-width: 736px)
and ( orientation: portrait){
.coursBox1 h1{
font-size: 10px;
}
}
@media only screen
and ( max-device-width: 736px)
and ( orientation: landscape){
.coursBox1 h1{
font-size: 100px;
}
}

最佳答案

您的代码中有一些错误。您不要在逻辑运算符之间使用 ,。您还缺少结束 }。此外,由于 运算符,您的媒体查询非常具体。

作为初学者,我会放弃逻辑运算符,只使用 device-width 属性,因为这是触发查询的关键值。了解其在浏览器中的工作原理后,开始添加逻辑运算符。

如果您希望针对移动设备(例如平板电脑和更小的设备)调整您的字体大小或其他任何内容,那么您可以使用类似的方法:

/* This generally targets both tablets and phones */
@media (max-width: 1024px) {
h1 {
font-size: 21px;
}
// other styles targeted to tablet/phone devices
}

/* This generally targets phones sizes and smaller */
@media (max-width: 768px) {
h1 {
font-size: 18px;
}
// other styles targeted to phone devices
}

这只是一个指南。

请查看这些资源,了解一系列具有相应尺寸的野外设备:- http://viewportsizes.com/- http://www.mydevice.io/devices/

和一些预制的媒体查询片段- Media Query Standard Devices

CSS media queries - MDN

关于html - 响应式 css 总是应用横向,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/30854923/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com