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始终应用景观

1 个答案: