网页设计:如何处理窗口大小调整?
有人可以告诉我处理不同窗口大小以及用户在创建网页时调整窗口大小的最佳方法吗?
因为我总是发现自己使用 html、css 等创建布局,起初一切看起来都很完美。但一旦我增加或减少浏览器窗口的大小,一切都会崩溃。
如果有人能给我指出某种指南或类似的东西,那就太好了。
谢谢它提前!非常感谢任何帮助!
Can somebody please tell me the best way to deal with different window sizes and with a user resizing the window when creating a webpage.
Because I always find myself creating layouts with html, css, etc. and at first everything look perfect. But as soon as I increase or decrease the size of the browser window everything falls apart.
Also it would be great if anybody could point me to some sort of guide or anything similar.
Thanks it advance! Any help is greatly appreciated!
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(1)
为了进行检测,您可能需要使用 css 媒体查询(在这种情况下,您可能需要使用 https://github.com/scottjehl/Respond)。 com/scottjehl/Respond Respond.js 针对旧版浏览器的填充程序,以添加更全面的跨浏览器支持),并针对某些屏幕宽度。 http://html5boilerplate.com 及其默认 css:http://html5boilerplate.com/css/style.css 有一个很好的默认 CSS 集,专门针对这种类型的媒体查询。
另一种方法是为页面的外部容器提供固定的最小和最大宽度。例如:
这样您就可以放大和缩小它,并查看它在一定范围内的外观,并知道其他查看窗口将会看到它,并且在最坏的情况下还会有一个水平滚动条以供小范围查看。
一般来说,仅使用 html5boilerplate 作为起始基础是一个很好的方法,它是一项出色的工作。
For detection, you may want to use css media queries (in which case you may want to to use https://github.com/scottjehl/Respond Respond.js's shim for older browsers, to add fuller cross browser support), and target certain screen widths. http://html5boilerplate.com and it's default css: http://html5boilerplate.com/css/style.css has a great default css set for exactly that type of media query.
Another approach is to give a fixed minimum and maximum widths to the outer container of the page. For example:
that way you can grow and shrink it and see how it looks within a certain range and know that other viewing windows are going to see that plus a horizontal scroll bar at worst for small viewing.
In general, just using the html5boilerplate as a starting base is a great approach, it's an excellent piece of work.