css3 rem pc端 |img标签 css

对于pc端页面的设计，大家通常采用px作为单位。但rem与其他单位不同的地方在于它的弹性特征，使得页面按比例等比缩放，解决了不同屏幕、不同分辨率下，字体大小比例失调的问题。
例如，在pc端大家设计一个768px的宽度，rem可以使得布局在不同尺寸的屏幕中呈现相同的效果，如下所示：

/*根据窗口大小改变根字号，字体size也随之变化*/  
html{  
font-size: 16px;  
}  
@media screen and (min-width: 960px){  
html{  
font-size: 20px;  
}  
}  
@media screen and (min-width: 1200px){  
html{  
font-size: 24px;  
}  
}

大家可以发现，通过媒体查询@media可以依据不同的分辨率设计不同的根字号从而适应不同的设备尺寸，这也是rem在响应式布局中的重要应用。
同时，rem的使用可以大大增加网站的可访问性，适应视力差异，提高用户体验。