标签：显示器 自己 span 屏幕宽度 字体 不能 and 定义 尺寸
@media 媒体查询选择性加载css，意思是自动探测屏幕宽度，然后加载相应的CSS文件。可以针对不同的屏幕尺寸设置不同的样式，特别是需要设置设计响应式的页面，@media 是个不错的选择
用法：
@media 设备类型 and (设备特性-宽度) {
// css 样式
} //设备类型有很多 这是screen是显示器的意思
@media screen and (min-width:1200px){//>=1200px的设备} @media screen and (min-width: 960px) and (max-width:1199px) {//<=1199px and >=960px的设备:PC端;} @media screen and (min-width: 768px) and (max-width:959px) {//<=959px and >=768px的设备：PC端;} @media screen and (min-width: 640px) and (max-width:767px) {//<=767px and >=640px的设备：平板端或者手机横屏;} @media screen and (min-width: 480px) and (max-width:639px) {//<=639px and >=480px的设备：手机横屏;} @media screen and (min-width: 320px) and (max-width:479px) {//<=479px and >=320px的设备：手机竖屏;} @media screen and (min-width: 240px) and (max-width:319px) {//<=479px and >=320px的设备：手机竖屏;} @media screen and (max-width:239px){//<=239px的设备:手机竖屏}
注意：单独使用min和max时使用顺序的 从上往下， min-width 从小到大 ，max-width 从大到小
rem是根据网页根元素的字体大小来定义的若此时html{ font-size：14px} 那么在页面中1rem就表示14px
在PC端使用rem的一些弊端：
通常在使用rem时要结合js来动态设置根元素的字体大小
// 绑定到窗口的这个事件中
window.onresize(function (){
let designSize = 1920; // 设计图尺寸
let cW = document.documentElement.clientWidth;// 窗口宽度
let rem = cW * 100 / designSize;
document.documentElement.style.fontSize = rem + ‘px‘;
});
(jquery: $(window).resize(function(){ //code }); )
//为什么要*100？ 意思是设置根元素字体默认为100px，因为众多浏览器默认字体大小是不确定，谷歌12px一下默认为12px 这里设置为100，避免在各个浏览器出现样式错乱问题 在使用时
若设计图的尺寸是200px使用rem 写为2rem就可以了
标签：显示器 自己 span 屏幕宽度 字体 不能 and 定义 尺寸
原文地址：https://www.cnblogs.com/yangchin9/p/10780856.html
