响应式 css 始终应用横向

Question

我正在尝试理解为什么我的 css 在纵向应用时总是在横向应用 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

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

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

响应式 css 始终应用横向

Responsive css always applying landscape

html

css

screen-orientation

responsive-design