html - 如何为每个设备尺寸编写媒体查询

标签 html css media-queries

我想使用媒体查询开发响应式网页。 我还为移动设备、表格和桌面设备编写了媒体查询。

但我无法理解,如果我正在为设备 max-width:320px 编写一组 css 代码,那么我必须为另一个设备再次编写相同的代码,即 640px,但大小不同。

我很困惑这是否是编写媒体查询的正确方法,因为我一次又一次地为每种设备尺寸编写同一组 css 代码。

请帮助我继续进行,因为我是媒体查询的新手。 而且我也很困惑是选择自适应布局还是响应式布局?


太好了,感谢大家提供的有用答案。 我给了公司一个任务,他们告诉我我不能使用任何框架来设计响应式网页,我只能为此使用媒体查询。

最佳答案

这可能会消除您所有的疑虑。这个框架使您的工作变得更加轻松。 http://getbootstrap.com/

希望对您有所帮助。

关于html - 如何为每个设备尺寸编写媒体查询,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/31064773/

相关文章:

html - 如何在 1 行的小屏幕上正确堆叠 col 元素?

javascript - 我如何构建一个函数来查找 2 个被单击的特定按钮?

css - 什么是 :horizontal and :vertical pseudo selectors for?

css - 媒体查询无法正常工作(平板电脑大小有效,移动设备无效)

html - CSS背景图片的动态宽度

html - block 显示的 CSS 大纲错误

javascript - Jquery 旋转图像

javascript - 如何从 tailwind 配置文件获取颜色值

css - 当屏幕宽度为 "is too small or too big"时,条件视口(viewport)缩放以适合?

android - 媒体查询在默认的 android 浏览器中不起作用(在同一设备上的其他浏览器中可以)