CSS-@media和rem

Posted 2021-10-30 yangchin9

@media 查询

@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 像素单位

rem是根据网页根元素的字体大小来定义的若此时html{ font-size：14px} 那么在页面中1rem就表示14px

在PC端使用rem的一些弊端：

1. 兼容性，pc端兼容性要求还是挺高的
2. 计算，rem作为单位需要进行简单的计算的
3. pc端浏览器大小是会变化的，每次变化都需要重新设置跟字体的大小
4. pc端字体不能跟随浏览器大小来定（谷歌对最小字体大小是有限制的），而且pc端自适应主要是宽度吧，rem自适应是所有的，
5. 我自己在使用还受到行高的影响，很是无奈啊

通常在使用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就可以了