请问为啥rem设置height 或width 自适应无效呢？而文字却可以。。。

Posted 2023-03-26

我文字和红色的div块都是用rem做单位的，然后设定了2种不同屏幕宽度下html的font-size大小，最后rem文字会自适应，但是div块的宽度高度没有自适应，请问这是为什么。。。ps：谷歌浏览器不可以，但是火狐却可以？？？？？？？？？？？？？？

rem（font size of the root element）是指 相对于根元素的字体大小的单位。宽度用该单位其实是一种兼容行为了，和字体用会有点区别。
chrome的最小文字为大小12px;当文字小于12px时，会被当作12px进行计算。（火狐没有该限制，所以楼主在火狐下正常的）
比如你html的font-size:10px;
内容中，font-size:1.2rem是能正常显示为12px。但是width:2rem的话，它和字体的计算方式不一样，会变长2*12(因为html设置的10px小于12px）=24px了,比预计的20px多了4px。
解决办法就是把html的font-size设为大于12的值。 参考技术A html，bodyfont-size: 40px !important; 这样应该可以解决本回答被提问者采纳

移动端H5页面自适应手机屏幕宽度

1.由于本人使用的是sublime.text，使用rem就可以达到效果。

点击菜单中的preferences下的browse packages，选择cssrem-master，添加或者编写cssrem.sublime-settings文件。

设置px_to_rem的值为75即可。

在代码里输入设置的对应px值，按TAB键就可以转换为rem

 

在使用时，同事引用flexible.js文件

2.<meta name="apple-mobile-web-app-capable" content="yes">

下面（）里的不用

（使用meta标签，这也是普遍使用的方法，理论上讲使用这个标签是可以适应所有尺寸的屏幕的，但是各设备对该标签的解释方式及支持程度不同造成了不能兼容所有浏览器或系统。

首先解释该标签的含义：<meta name="viewport" content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/>

如果你完全不了解这个标签的使用需要先百度一下。

解释：content中的“width” 这个width指的是什么宽度，我看过的文章对这个都没有解释的很清楚，有几个备选：虚拟窗口的宽度、手机屏幕的宽度、还是页面的宽度等等？经试验这个指的是虚拟窗口的宽度。了解宽度之后，对后续的各种scale，就应该知道是谁与谁的比例，是 虚拟窗口宽度 / 页面宽度，这样就会有问题出现安卓设备尺寸差异很大光主流的就有宽度为 320 480 720 1080 等各种尺寸而以上标签只能支持一种尺寸，当然有些浏览器会自动缩放使其适应屏幕，但这不是统一标准，正确的做法是用js动态生成此标签，当然，应该先获取屏幕尺寸。）

<script type="text/javascript">
if(/Android (\d+\.\d+)/.test(navigator.userAgent)){
var version = parseFloat(RegExp.$1);
if(version>2.3){
var phoneScale = parseInt(window.screen.width)/640;
document.write(‘<meta name="viewport" content="width=640, minimum-scale = ‘+ phoneScale +‘, maximum-scale = ‘+ phoneScale +‘, target-densitydpi=device-dpi">‘);
}else{
document.write(‘<meta name="viewport" content="width=640, target-densitydpi=device-dpi">‘);
}
}else{
document.write(‘<meta name="viewport" content="width=640, user-scalable=no, target-densitydpi=device-dpi">‘);
}
</script>

3.微信分享要引用的<script src="http://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script>

4.使用媒体查询功能   比如兼容iphone的样式 @media only screen and (min-device-width : 320px) and (max-device-height : 460px){}

做到以上几点，基本的自适应就可以了