响应式设计中如何用 @media 适配不同的显示器
随着数字化信息的快速发展，人们的生活方式也在不断变化，人们的使用设备也千奇百怪。比如，有些人使用手机，有些人使用平板电脑以及笔记本电脑等。因此，对于网站设计的要求也发生了改变。对于一个好的网站，需要能够自动适应各种设备的规格，此时响应式设计就应运而生。
响应式设计基于 @media 查询来实现网站的适配和排版。@media查询允许您定义多种排版，您可以在不同的屏幕宽度范围内定义 CSS 样式。这个功能使设计师可以在不同设备上使用不同的CSS规则，以适应不同的视口大小。
@media 查询可以基于视口宽度（vw）来设置样式。它允许您定义多个 CSS 规则，以适应不同屏幕宽度。
下面是一些常用的 @media 查询规则：
-- -------------------- ---- -------
-- ------ --- -- --
------ ------ --- ----------- ------ -
---- -
---------- -----
-
-
-- ------ --- -- --
------ ------ --- ----------- ------ -
---- -
---------- -----
-
-
-- ----- --- --- --- ---- --
------ ------ --- ----------- ------ --- ----------- ------ -
---- -
---------- -----
-
-在这里，@media查询规则指定了 3 个不同屏幕宽度下的字体大小。
示例代码：
-- -------------------- ---- -------
--------- -----
----- ----------
------
----- ----------------
--------------------
-------
-- ------ --- -- --
------ ------ --- ----------- ------ -
---- -
---------- -----
-
-
-- ------ --- -- --
------ ------ --- ----------- ------ -
---- -
---------- -----
-
-
-- ----- --- --- --- ---- --
------ ------ --- ----------- ------ --- ----------- ------ -
---- -
---------- -----
-
-
--------
-------
------
----------------
-----------------------------------------------
-------- --- - ------ -------------------------
-------
-------总结一下，响应式网站设计已成为网页设计中的必要技能之一，通过使用 @media 查询，您可以为不同屏幕大小定义 CSS 规则。这个功能极大地提高了您的设计效率，同时也可以使您的网站获得更好的视觉体验。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/65a21eafadd4f0e0ffa2dfb8