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 - 在属性指令中创建禁用绑定(bind)

javascript - 需要在asp .net文本框中使用焦点

javascript - 使用 Jquery 的菜单栏淡入淡出(结果不符合预期)

jquery 冲突不在同一页面中运行两个 jquery

jquery - 在 AngularJS 之后加载 jQuery(而不是之前)

database - 需要客户端同步本地数据库的移动数据库

jquery - 同步动画 : how to shrink font size while moving left using jQuery

css - 下拉菜单的 z-index 不起作用

javascript - 如何实现只选择一个 block ,而不是所有 block ?

html - Bootstrap 菜单未在移动设备上显示