zoukankan      html  css  js  c++  java
  • rem+media+jquery布局结局方案

    <!DOCTYPE html>
    <html lang="en">

    <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>rem布局——rem+js</title>
    </head>
    <style type="text/css">
    html {
    font-size: 32px;
    /* 320/10 */
    }

    body {
    font-size: 16px;
    /* 修正字体大小 */
    /* 防止页面过宽 */
    margin: auto;
    padding: 0;
    width: 10rem;
    /* 防止页面过宽 */
    outline: 1px dashed green;
    }

    /* js被禁止的回退方案 */
    @media screen and (min-width: 320px) {
    html {
    font-size: 32px
    }

    body {
    font-size: 16px;
    }
    }

    @media screen and (min-width: 481px) and (max-width:640px) {
    html {
    font-size: 48px
    }

    body {
    font-size: 18px;
    }
    }

    @media screen and (min-width: 641px) {
    html {
    font-size: 64px
    }

    body {
    font-size: 20px;
    }
    }

    noscript {
    display: block;
    border: 1px solid #d6e9c6;
    padding: 3px 5px;
    background: #dff0d8;
    color: #3c763d;
    }

    /* js被禁止的回退方案 */

    .p1,
    .p2 {
    border: 1px solid red;
    margin: 10px 0;
    }

    .p1 {
    width: 5rem;
    height: 5rem;
    font-size: 1.2em;
    /* 字体使用em */
    }

    .s1 {
    font-size: 1.2em;
    /* 字体使用em */
    }

    .p2 {
    width: 4rem;
    height: 4rem;
    }

    .s2 {
    font-size: 1.2em
    /* 字体使用em */
    }
    </style>

    <body>
    <noscript>开启JavaScript,获得更好的体验</noscript>
    <div class="p1">
    宽度为屏幕宽度的50%,字体大小1.2em
    <div class="s1">
    字体大小1.2.em
    </div>
    </div>

    <div class="p2">
    宽度为屏幕宽度的40%,字体大小默认
    <div class="s2">
    字体大小1.2em
    </div>
    </div>
    </body>

    </html>
    <script type="text/javascript">
    var documentElement = document.documentElement;
    function callback() {
    var clientWidth = documentElement.clientWidth;
    // 屏幕宽度大于780,不在放大
    clientWidth = clientWidth < 780 ? clientWidth : 780;
    documentElement.style.fontSize = clientWidth / 10 + 'px';
    }

    document.addEventListener('DOMContentLoaded', callback);
    window.addEventListener('orientationchange' in window ? 'orientationchange' : 'resize', callback);


    </script>
  • 相关阅读:
    poj 2187 Beauty Contest(旋转卡壳)
    poj 2540 Hotter Colder(极角计算半平面交)
    poj 1279 Art Gallery(利用极角计算半平面交)
    poj 3384 Feng Shui(半平面交的联机算法)
    poj 1151 Atlantis(矩形面积并)
    zoj 1659 Mobile Phone Coverage(矩形面积并)
    uva 10213 How Many Pieces of Land (欧拉公式计算多面体)
    uva 190 Circle Through Three Points(三点求外心)
    zoj 1280 Intersecting Lines(两直线交点)
    poj 1041 John's trip(欧拉回路)
  • 原文地址:https://www.cnblogs.com/yayaxuping/p/9843673.html
Copyright © 2011-2022 走看看