[英]How to add CSS code to make responsive for different screen sizes?
我有使用View Web Server本地HTML的Android程序。 但是HTML在Android设备模拟器中无法很好地工作。 我使用这些CSS代码,但无法正常工作。
@media screen and (-webkit-device-pixel-ratio: 1.5) {}
@media screen and (-webkit-device-pixel-ratio: 0.75) {}
并且这些下面的CSS代码适用于浏览器,但不适用于android模拟器。
@media screen and (min-width:960px) and (max-width:1200px){}
@media screen and (min-width:720px) and (max-width:959px) {}
@media screen and (min-width:640px) and (max-width:719px) {}
@media screen and (min-width:480px) and (max-width:639px) {}
@media screen and (min-width:320px) and (max-width:479px) {}
有人可以告诉我适用于手机和平板电脑,横向和纵向的CSS代码。 感谢您的回答...
我不能完全确定我了解您的问题,但是如果您遇到问题,我认为您是:尝试以下操作:
<meta name="viewport" content="width=device-width" />
您的第二个版本应该无缝运行:
@media screen and (min-width:960px) and (max-width:1200px){}
@media screen and (min-width:720px) and (max-width:959px) {}
@media screen and (min-width:640px) and (max-width:719px) {}
@media screen and (min-width:480px) and (max-width:639px) {}
@media screen and (min-width:320px) and (max-width:479px) {}
因为第一个版本依赖于设备像素比率,而不取决于实际的屏幕尺寸。 您是否在head
插入了视口meta标签 ?
尝试在头部添加此内容。
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
并在css文件中编写媒体查询,如下所示。
@media only screen and (min-width: 600px){
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.