css - 媒体查询中使用的宽度

标签 css responsive-design media-queries fluid-layout

<分区>

对于台式机、平板电脑、笔记本电脑/Ipad、Iphone 和智能手机等所有设备,最重要的媒体查询宽度是多少? 这些设备是否有任何标准宽度?

最佳答案

我正在到处寻找对此的最佳答案。这是我的发现。

@media (min-width:320px) { /* smartphones, iPhone, portrait 480x320 phones */ }
@media (min-width:481px) { /* portrait e-readers (Nook/Kindle), smaller tablets @ 600 or @ 640 wide. */ }
@media (min-width:641px) { /* portrait tablets, portrait iPad, landscape e-readers, landscape 800x480 or 854x480 phones */ }
@media (min-width:961px) { /* tablet, landscape iPad, lo-res laptops ands desktops */ }
@media (min-width:1025px) { /* big landscape tablets, laptops, and desktops */ }
@media (min-width:1281px) { /* hi-res laptops and desktops */ }

我认为最好考虑使用移动优先方法。从移动样式表开始,然后应用与其他设备相关的媒体查询。感谢@ryanve。这是 link .

关于css - 媒体查询中使用的宽度,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/16704243/

相关文章:

html - 响应式设计 : how to have text input and button stay 100% width of parent

javascript - 如何根据 CSS 中的屏幕大小更改文本(不是字体大小)?

javascript - 有没有办法在没有异步的情况下获取 dom.style changed 钩子(Hook)?

css - 将子菜单的右边框与其父元素的右边框对齐

jquery - Css/jQuery/mobile responsive - 如何让我的动画响应?

ipad - 条件@import 和@media - CSS

css - TailWindCSS 最大高度

html - 并排放置两个 Div

css - 更改 css 文件中 aem 中的图像,而无需手动更改 css 文件中的路径

javascript - 滚动动画在移动设备上无法像在桌面滚动上一样工作。Top() jQuery