html - 是否有适合所有尺寸手机的视口(viewport)屏幕模式配置?

标签 html css mobile screen viewport

我使用了视口(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/

相关文章:

javascript - Gmail 移动 CSS 和 JavaScript 框架的任何替代品?

php - 获取当前登录的 TYPO3 用户 (fe-user)

javascript - 弹出框没有出现在 React 中

html - 为什么骨架中第一列之前有一个空格?

php - CodeIgniter Controller 命名困惑

jquery - 加载时显示页面移动版本的图像

javascript - 在单个 HTML 页面中单击 CSS 或 Javascript 中的 div 标签之间的平滑过渡

html - Cloud9 IDE + Rails App : CSS Background Image Not Showing on . erb 页面

jquery - 在 mouseenter 和 mouseleave 上添加 animate.css 类

android - 当手机上的 "minimized"时,移动 Web 应用程序/pwa 可以发送 HTTP 请求吗?