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

Question

我试图理解为什么我的 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;
}
}

Answer 1

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

作为初学者，我会放弃逻辑运算符，只使用 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