如何制作适合所有屏幕分辨率的网页
我正在尝试创建一个格式化为适合所有屏幕宽度的网页 尺寸（或分辨率）。
换句话说，我想以这样的方式设置页面宽度的格式，以便任何查看该页面的人都不必使用屏幕底部的水平滚动条。
到目前为止，我还没有找到关于这个主题的帮助。
I am attempting to create a webpage formatted to fit the width of all screen
sizes (or resolutions).
In other words, I want to format the width of my page in such a way that anyone who views it will not have to use a horizontal scroll bar at the bottom of the screen.
So far, I have found no help on this topic.
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（3）
嗯，有几种方法。一种方法是使用 em/百分比作为宽度，从而实现适应用户屏幕分辨率的流畅设计。另一种方法是拥有多个不同宽度的 css 表，并根据简单的 js 代码检查屏幕分辨率来调用它们。
第一个有点难，但会产生良好稳定的结果。另一方面，（作为设计师）它有点限制你的创造力。
在我看来后者的使用更为广泛。如今，3 种不同的样式表足以满足世界各地的大多数设备。一个大约 900 像素的尺寸将覆盖较旧的屏幕，一个大约 1160 像素的尺寸将处理更大、更现代的屏幕，而一个用于移动设备的尺寸（抱歉，不知道大概的宽度）应该可以解决问题。
Well, there are several approaches. One would be to use ems/percentages for your widths thus achieving a fluid design that adopts to your users screen resolution. The other is to have several css sheets for different widths and call them based upon a screen resolution check from a simple js code.
The first one is a bit harder, but yields good stable results. On the other hand, (as a designer) it kinda restricts your creativity a bit.
It seems to me like the latter is more widely used. Nowadays, 3 different stylesheets will suffice for most devices around the world. One around 900px will cover somewhat older screens, one around 1160px will handle the larger and more modern screens, and one for mobile devices(sorry, no idea on approximate width) should do the trick.
按照您提出这个问题的方式，不仅主体的宽度必须为 100%，而且其子元素的宽度也必须以百分比为单位。
The way you're asking this question, not only will the width of the body have to be 100%, but the width of its the child elements will also have to be in percentages.
实现可扩展网页的唯一方法是避免固定尺寸。当然，这会带来文本问题，因为它会尝试将其换行到以下几行，因此您必须指定最小宽度或将其与带有溢出：隐藏的预标记结合起来，这样它就不会影响您的页面布局根本无法阅读文本的代价。
幸运的是，您只需将网络浏览器缩小到较小的分辨率并查看效果如何即可轻松测试页面。
The only way to achieve a scalable web page is by avoiding fixed sizes. Of course that presents problems with text since it will attempt to wrap it on the following lines, so you must either specify a minimum width or combine it with a pre tag with overflow: hidden so that it won't affect your page layout at the expense of simply not being able to read the text.
Fortunately, you can easily test your page by simply shrinking your web browser to smaller resolutions and seeing how it pans out.