西安做网站_西安网站建设公司_西安网页制作_西安网页设计_西安网站制作设计公司

 找回密码
 注册

QQ登录

只需一步,快速开始

搜索
查看: 12195|回复: 5

手机端页面自适应解决方案—rem布局

[复制链接]
发表于 2018-8-7 11:41:50 | 显示全部楼层 |阅读模式
rem布局非常简单,首页你只需在页面引入这段原生js代码就可以了
  1.     (function (doc, win) {
  2.         var docEl = doc.documentElement,
  3.             resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
  4.             recalc = function () {
  5.                 var clientWidth = docEl.clientWidth;
  6.                 if (!clientWidth) return;
  7.                 if(clientWidth>=640){
  8.                     docEl.style.fontSize = '100px';
  9.                 }else{
  10.                     docEl.style.fontSize = 100 * (clientWidth / 640) + 'px';
  11.                 }
  12.             };

  13.         if (!doc.addEventListener) return;
  14.         win.addEventListener(resizeEvt, recalc, false);
  15.         doc.addEventListener('DOMContentLoaded', recalc, false);
  16.     })(document, window);
复制代码


西安网站建设 | 西安做网站 —— 剑锋所指 所向披靡!
回复

使用道具 举报

 楼主| 发表于 2018-8-7 11:42:30 | 显示全部楼层
如果页面的宽度超过了640px,那么页面中html的font-size恒为100px,否则,页面中html的font-size的大小为: 100 * (当前页面宽度 / 640)
回复 支持 反对

使用道具 举报

 楼主| 发表于 2018-8-7 11:43:13 | 显示全部楼层
移动端页面效果图的宽度都定在了640px。于是我在项目中,最外层的div样式就设置成了
position: relative;
width: 100%;
max-width: 640px;
min-width: 320px;
margin: 0 auto;
回复 支持 反对

使用道具 举报

 楼主| 发表于 2018-8-7 11:43:45 | 显示全部楼层
rem布局中,如果有个元素需要水平居中固定到页面底部,你会怎么设置它的样式呢。
我是这样做的,前提是这个元素还是在前面说的最外层水平居中的大div中,样式如下
position: fixed;
bottom: 0;
z-index: 100;
width: 100%;
max-width: 640px;
min-width: 320px;
回复 支持 反对

使用道具 举报

 楼主| 发表于 2018-8-7 11:44:29 | 显示全部楼层
比较常用的REM适配函数

var _htmlFontSize = (function () {
        var clientWidth = document.documentElement ? document.documentElement.clientWidth : document.body.clientWidth;
        //if(clientWidth > 768) clientWidth = 768;
        if (clientWidth > 768 && clientWidth < 1280) {
            clientWidth = 768;
        } else if (clientWidth >= 1280) {
            clientWidth = 512;
        }
        document.documentElement.style.fontSize = clientWidth * 1 / 16 + "px";
        return clientWidth * 1 / 16;
    })();
回复 支持 反对

使用道具 举报

 楼主| 发表于 2018-8-7 11:56:30 | 显示全部楼层
:nth-child(n)
p:nth-child(3n+0)
{
background:#ff0000;
}
p:nth-child(odd) 奇数
p:nth-child(even) 偶数
回复 支持 反对

使用道具 举报

您需要登录后才可以回帖 登录 | 注册

本版积分规则

QQ|小黑屋|手机版|Archiver|西安网站建设

GMT+8, 2024-3-29 17:01 , Processed in 0.045381 second(s), 23 queries .

Powered by Discuz! X3.4

Copyright © 2001-2020, Tencent Cloud.

快速回复 返回顶部 返回列表