Question

当我在桌面模式下使用min-width:368px;时，它正在运行，但之后因为我正在使用媒体查询而我正在将其转换为max-width:368px（适用于移动设备和平板电脑），但它无效。它取min-width值不是max-width值。为什么？。

示例：

min-width: 368px;(desktop );
max-width: 368px;(mobile, tablet);

Answer 1

试试这个：

@media screen and (max-device-width: 480px) and (orientation: portrait){
 /* some CSS here */
}

/* #### Mobile Phones Landscape #### */
 @media screen and (max-device-width: 640px) and (orientation:landscape){
 /* some CSS here */
 }

/* #### Mobile Phones Portrait or Landscape #### */
@media screen and (max-device-width: 640px){
 /* some CSS here */
}

/* #### iPhone 4+ Portrait or Landscape #### */
@media screen and (min-device-width: 320px) and (-webkit-min-device-pixel-ratio: 2){
 /* some CSS here */
}

 /* #### iPhone 5 Portrait or Landscape #### */
 @media (device-height: 568px) and (device-width: 320px) and (-webkit-min-device-pixel-ratio: 2){
 /* some CSS here */
}

 /* #### iPhone 6 and 6 plus Portrait or Landscape #### */
  @media (min-device-height: 667px) and (min-device-width: 375px) and (-webkit-min-device-pixel-ratio: 3){
  /* some CSS here */
  }

   /* #### Tablets Portrait or Landscape #### */
   @media screen and (min-device-width: 768px) and (max-device-width: 1024px){
   /* some CSS here */
}

 /* #### Desktops #### */
 @media screen and (min-width: 1024px){
  /* some CSS here */
}

CSS3：max-width＆amp;最小宽度

1 个答案: