element 手机适配_移动端rem.js适配屏幕
时间: 2023-08-19 15:03:46 浏览: 61
移动端的 rem.js 适配屏幕可以通过以下步骤进行:
1. 在 head 标签内加入以下代码,用于设置 viewport:
```html
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
```
2. 创建一个 rem.js 文件,并在该文件内添加以下代码:
```javascript
;(function (win, doc) {
var docEl = doc.documentElement
var resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize'
var recalc = function () {
var clientWidth = docEl.clientWidth
if (!clientWidth) return
docEl.style.fontSize = 100 * (clientWidth / 750) + 'px' // 假设设计稿宽度为750px
}
if (!doc.addEventListener) return
win.addEventListener(resizeEvt, recalc, false)
doc.addEventListener('DOMContentLoaded', recalc, false)
})(window, document)
```
3. 在 HTML 文件内引入 rem.js 文件:
```html
<script src="rem.js"></script>
```
以上代码的含义是:在页面加载或屏幕旋转时,计算根元素的字体大小。假设设计稿宽度为 750px,根元素的字体大小则为屏幕宽度的 1/7.5(100/750)。
这样,你就可以使用 rem 单位进行布局了。例如,设计稿中某个元素的宽度为 200px,可以写成:
```css
width: 2rem;
```