关于响应式网站的开发素材

作者: 蘇简 | 来源:发表于2016-11-19 19:49 被阅读72次

关于响应式网站的开发素材
响应式开发
7 响应式网站的内容设计
聊一聊搭建高质量响应式网站有哪些技巧？
优秀设计素材网站
Angular表单验证
2018-08-02
响应式网页设计
火狐浏览器远程调试手机网页
用CSS解决响应式banner与网站色调不一致问题

最近在进行响应式的开发，在网上找了一些内容收集在这里

（一）

(function (doc, win) {
          var docEl = doc.documentElement,//根元素html
          //判断窗口有没有orientationchange这个方法，有就赋值给一个变量，没有就返回resize方法。
            resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
            recalc = function () {
              var clientWidth = docEl.clientWidth;
              if (!clientWidth) return;
              //把document的fontSize大小设置成跟窗口成一定比例的大小，从而实现响应式效果。
              docEl.style.fontSize = 20 * (clientWidth / 320) + 'px';
            };
            //alert(docEl)
          if (!doc.addEventListener) return;
          win.addEventListener(resizeEvt, recalc, false);//addEventListener事件方法接受三个参数：第一个是事件名称比如点击事件onclick，第二个是要执行的函数，第三个是布尔值
          doc.addEventListener('DOMContentLoaded', recalc, false)//绑定浏览器缩放与加载时间
        })(document, window);
        //alert(document.documentElement.clientWidth/320)

参考网址：
移动端自适应js
web app变革之rem

2.（二）

脚本默认为640px，非640px宽度设计稿需在<head>添加下面的 meta 标签属性
content="750" ，750改为实际设计稿宽度

<meta name="W_design" content="750" />

(function(e, t) {
    function n() {
        for (var e = navigator.userAgent,
        t = ["Android", "iPhone", "SymbianOS", "Windows Phone", "iPad", "iPod"], n = !0, i = 0; t.length > i; i++) if (e.indexOf(t[i]) > 0) {
            n = !1;
            break
        }
        return n
    }
    function i() {
        var t = a.getBoundingClientRect().width;
        n() && 2047 > t && (t = 640);
        var i = t * 100 / w;
        a.style.fontSize = i + "px",
        d.rem = e.rem = i
    }
    var r, o = e.document,
    a = o.documentElement,
    s = o.querySelector('meta[name="viewport"]'),
    c = o.querySelector('meta[name="flexible"]'),
    l = 0,
    u = 0,
    d = t.flexible || (t.flexible = {});
    var w = o.querySelector('meta[name="W_design"]') ? o.querySelector('meta[name="W_design"]').getAttribute('content') : 640;
    if (s) {
        console.warn("将根据已有的meta标签来设置缩放比例");
        var p = s.getAttribute("content").match(/initial\-scale=([\d\.]+)/);
        p && (u = parseFloat(p[1]), l = parseInt(1 / u))
    } else if (c) {
        var f = c.getAttribute("content");
        if (f) {
            var h = f.match(/initial\-dpr=([\d\.]+)/),
            m = f.match(/maximum\-dpr=([\d\.]+)/);
            h && (l = parseFloat(h[1]), u = parseFloat((1 / l).toFixed(2))),
            m && (l = parseFloat(m[1]), u = parseFloat((1 / l).toFixed(2)))
        }
    }
    if (!l && !u) {
        e.navigator.appVersion.match(/android/gi);
        var g = e.navigator.appVersion.match(/iphone/gi);
        e.navigator.appVersion.match(/ipad/gi);
        var v = e.devicePixelRatio;
        l = g ? v >= 3 && (!l || l >= 3) ? 3 : v >= 2 && (!l || l >= 2) ? 2 : 1 : 1,
        u = 1 / l
    }
    if (a.setAttribute("data-dpr", l), !s) if (s = o.createElement("meta"), s.setAttribute("name", "viewport"), s.setAttribute("content", "initial-scale=" + u + ", maximum-scale=" + u + ", minimum-scale=" + u + ", user-scalable=no"), a.firstElementChild) a.firstElementChild.appendChild(s);
    else {
        var y = o.createElement("div");
        y.appendChild(s),
        o.write(y.innerHTML)
    }
    e.addEventListener("resize",
    function() {
        clearTimeout(r),
        r = setTimeout(i, 300)
    },!1),
    e.addEventListener("pageshow",
    function(e) {
        e.persisted && (clearTimeout(r), r = setTimeout(i, 300))
    },!1),
    "complete" === o.readyState ? o.body.style.fontSize = 12 * l + "px": o.addEventListener("DOMContentLoaded",
    function() {
        o.body.style.fontSize = 12 * l + "px"
    },!1),
    i(),
    d.dpr = e.dpr = l,
    d.refreshRem = i,
    d.rem2px = function(e) {
        var t = parseFloat(e) * this.rem;
        return "string" == typeof e && e.match(/rem$/) && (t += "px"),
        t
    },
    d.px2rem = function(e) {
        var t = parseFloat(e) / this.rem;
        return "string" == typeof e && e.match(/px$/) && (t += "rem"),
        t
    }
})(window, window.lib || (window.lib = {}));

参考网址：
移动端自适应js（二）

3.（三）
responsive-page