如何在不添加/删除/编辑设计和 CSS 的情况下为纵向和横向模式制作响应式设计?
我正在设计一个适用于台式机和 iPad 的网站。 iPad 和台式电脑将使用同一网站。
网站的设计宽度为 1024 像素,在 iPad 纵向模式下将为 768 像素。我的问题是在进行设计和编写 CSS 时应该考虑哪些事情,因此不需要为纵向模式编写特定的 css
我想在不使用媒体查询的情况下为两个方向创建灵活的布局。
I'm designing a Website for Desktop and iPad. The same website will be used for iPad and Desktop PCs.
Site's design width is 1024px and in iPad Portrait mode it will be 768px. My questions is what things I should consider while making Design and writing CSS so writing specific css for Portrait mode should not be needed
I want to make flexible layout for both orientation without using media queries.
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(2)
您将必须对所有内容使用相对宽度 - 想想百分比和 em。
如果没有媒体查询,就不可能为方向提供不同的布局 - 但是,如果您的设计和代码灵活(使用相对宽度),您的设计将根据可用的屏幕宽度进行扩展和收缩。
在我看来,最大的设计问题是网站在 768 像素宽与 1024 像素宽时的外观;线路长度是否太长?图像将如何拉伸/收缩? 768 像素的字体大小在 1024 下是否清晰?
You are going to have to use relative width's for everything - think percentages and em's.
Without media queries, it's going to be impossible to serve up different layouts for orientations - however if your design and code is flexible (using relative widths), your design will expand and contract based on the available screen width.
The biggest design concern, in my opinion, would be what the site looks like at 768px wide vs 1024px wide; are the line lengths too long? How will images stretch/contract? Will a font size at 768px be legible at 1024?
字体大小将根据您设置的 em 自动调整,这是一件好事,因此您不必担心。
The font size will adjust automatically based on the em you set it to, which is a nice thing so you won't have to worry about it.