我使用了视口(viewport)屏幕模式的组合,但在跨手机和平台测试时它们往往不起作用。
我一直使用的代码示例有一个 480 像素宽的 html 文档,定义如下:
<link rel="stylesheet" media="only screen and (min-width: 320px) and (max-width: 480px) href="mobile.css" />
已经:
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
感谢任何帮助。
最佳答案
有这么多不同的屏幕尺寸,试图为所有屏幕尺寸设置样式是一场失败的战斗。更好的方法(可以说)是关注您自己内容的自然断点,并设置 @media 规则(如有必要)以在需要时重排内容。您可以通过缩小和扩大浏览器窗口轻松地测试这些断点。然后您就会知道,无论屏幕尺寸如何,您都涵盖了所有基础内容,并且内容将适合该设备。
关于html - 是否有适合所有尺寸手机的视口(viewport)屏幕模式配置?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/16757051/