媒体查询（@media）：能在不同的条件下使用不同的样式，使页面在不同在终端设备下达到不同的渲染效果
列举常用的pc屏幕宽度：
1024 1280 1366 1440 1680 1920
我们可在css样式中来写，也在不同屏幕下引入相应的样式。
1、css样式
假设我们在不同屏幕下要写基础字体的变化；
@media screen and(min-width: 1024px){ body{font-size: 12px} } /*>=1024的设备屏幕*/ @media screen and(min-width: 1100px) { body{font-size: 14px} } /*>=1100的设备屏幕*/ @media (min-width: 1280px) { body{font-size: 18px;} } /*>=1280的设备屏幕*/ @media screen and(min-width: 1366px) { body{font-size: 20px;} } /*>=1366的设备屏幕*/ @media screen and(min-width: 1440px) { body{font-size: 24px !important;} } /*>=1440的设备屏幕*/ @media screen and(min-width: 1680px) { body{font-size: 26px;} } /*>=1680的设备屏幕*/ @media screen and(min-width: 1920px) { body{font-size: 30px;} } /*>=1920的设备屏幕*/