CSS媒体查询,一个或多个用于移动设备优化

蒂娃

我知道以媒体为先的移动查询方式可以使网站在移动设备上的运行速度更快。我想知道使用大量媒体查询是否有区别,例如:

#first {}

@media screen and (min-width: 37.5em) {
    #first {}
}

#second {}

@media screen and (min-width: 37.5em) {
    #second {}
}

而不是对所有桌面样式都使用大字体,例如:

#first {}

#second {}

@media screen and (min-width: 37.5em) {
    #first {}

    #second {}
}

对于性能而言,哪个更好,还是重要?我认为第一种方法在处理多种样式时更容易阅读。

恩妮

他们俩都做同一件事,唯一使第二种方法更好的是,您不会重复自己。您将代码保持为DRY,所有内容都位于一个位置以使用该媒体查询。再加上每次都要重写@media屏幕,这将是一件麻烦事,而且很费时间。

本文收集自互联网,转载请注明来源。

如有侵权,请联系[email protected] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

CSS媒体查询,一个或多个用于移动设备优化

来自分类Dev

移动设备的CSS媒体查询不起作用

来自分类Dev

CSS媒体查询不适用于Android设备

来自分类Dev

在一个样式表中具有多个CSS媒体查询有什么影响?

来自分类Dev

是否有一个按钮可以通过媒体查询查看“非移动版式”?

来自分类Dev

媒体查询适用于Chrome,但不适用于移动设备

来自分类Dev

CSS媒体查询:一个文件还是单独的文件,并影响加载速度

来自分类Dev

一个CSS样式表中的媒体查询差异屏幕大小

来自分类Dev

媒体查询不适用于浏览器或移动设备

来自分类Dev

媒体查询仅一个像素大小

来自分类Dev

媒体查询仅一个像素大小

来自分类Dev

CSS媒体查询,像素密度,台式机和移动设备

来自分类Dev

如何使用 css 媒体查询仅在移动设备上定位谷歌浏览器

来自分类Dev

使用媒体查询来优化移动Web体验

来自分类Dev

“屏幕”属性(CSS媒体查询)应用于哪些设备?

来自分类Dev

“屏幕”属性(CSS媒体查询)应用于哪些设备?

来自分类Dev

媒体查询仅定位到移动设备

来自分类Dev

媒体查询响应表设计不响应移动设备

来自分类Dev

通过媒体查询在移动设备上显示恒定的页脚

来自分类Dev

媒体查询无法在移动设备上正常运行

来自分类Dev

媒体查询仅定位到移动设备

来自分类Dev

如何设置媒体查询并使它们在移动设备上运行

来自分类Dev

CSS-所有媒体查询都在一个文件中?或加载分开的CSS文件?

来自分类Dev

CSS-所有媒体查询都在一个文件中?或加载分开的CSS文件?

来自分类Dev

scss 错误“预期媒体查询” - 使用多个媒体查询 - 标准化设备的大小

来自分类Dev

在媒体查询中将一个div放在另一个div之上

来自分类Dev

CSS3媒体查询图像优化

来自分类Dev

CSS媒体查询以检测设备类型,而不考虑大小

来自分类Dev

捕获移动CSS媒体查询的最佳方法

Related 相关文章

  1. 1

    CSS媒体查询,一个或多个用于移动设备优化

  2. 2

    移动设备的CSS媒体查询不起作用

  3. 3

    CSS媒体查询不适用于Android设备

  4. 4

    在一个样式表中具有多个CSS媒体查询有什么影响?

  5. 5

    是否有一个按钮可以通过媒体查询查看“非移动版式”?

  6. 6

    媒体查询适用于Chrome,但不适用于移动设备

  7. 7

    CSS媒体查询:一个文件还是单独的文件,并影响加载速度

  8. 8

    一个CSS样式表中的媒体查询差异屏幕大小

  9. 9

    媒体查询不适用于浏览器或移动设备

  10. 10

    媒体查询仅一个像素大小

  11. 11

    媒体查询仅一个像素大小

  12. 12

    CSS媒体查询,像素密度,台式机和移动设备

  13. 13

    如何使用 css 媒体查询仅在移动设备上定位谷歌浏览器

  14. 14

    使用媒体查询来优化移动Web体验

  15. 15

    “屏幕”属性(CSS媒体查询)应用于哪些设备?

  16. 16

    “屏幕”属性(CSS媒体查询)应用于哪些设备?

  17. 17

    媒体查询仅定位到移动设备

  18. 18

    媒体查询响应表设计不响应移动设备

  19. 19

    通过媒体查询在移动设备上显示恒定的页脚

  20. 20

    媒体查询无法在移动设备上正常运行

  21. 21

    媒体查询仅定位到移动设备

  22. 22

    如何设置媒体查询并使它们在移动设备上运行

  23. 23

    CSS-所有媒体查询都在一个文件中?或加载分开的CSS文件?

  24. 24

    CSS-所有媒体查询都在一个文件中?或加载分开的CSS文件?

  25. 25

    scss 错误“预期媒体查询” - 使用多个媒体查询 - 标准化设备的大小

  26. 26

    在媒体查询中将一个div放在另一个div之上

  27. 27

    CSS3媒体查询图像优化

  28. 28

    CSS媒体查询以检测设备类型,而不考虑大小

  29. 29

    捕获移动CSS媒体查询的最佳方法

热门标签

归档