移动web--rem 自适应

banhui0728

于 2018-12-16 18:49:00 发布

阅读量90

点赞数

原文链接：http://www.cnblogs.com/noraZhang/p/10127543.html

版权

本文介绍了两种实现rem自适应布局的方法：一种是基于CSS媒体查询，另一种是通过JavaScript动态调整。详细展示了不同屏幕尺寸下的字体大小及元素宽度，并提供了具体的代码示例。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

rem 自适应--的两种方式:

　　rem : font size of root element (根元素的字体大小)

　　em : font size of element (父元素的字体大小)

1. 基于css 即媒体查询的来进行屏幕自适应

　　基与移动端的标准尺寸 640px,各种常见的屏幕尺寸下字体大小

宽度	320px	384px	480px	640px
屏幕对比比例	0.5	0.6	0.75	1
html font size	10px	12px	15px	20px
元素宽度(px)	100px	120px	150px	200px
元素宽度(rem)	10rem	12rem	15rem	20rem

@media only screen and (min-device-width:320px) {

　　html {

　　　　font-size: 10px;

　　}

2. 基于js

$(window).on('resize', function(){

　　var width = $('html').width();

　　var fontSize = width/640 *100;

　　$('html').css('font-size', fontSize);

}).trigger('resize')

转载于:https://www.cnblogs.com/noraZhang/p/10127543.html