zoukankan      html  css  js  c++  java
  • 常见的手机站注意事项

    相信很多刚开始写手机界面的同学都要面对页面自适应的问题,当然解决方案很多,比如:百分比布局,弹性布局flex,响应式布局……
    这里主要介绍的是本人在实践中用的最顺手最简单的布局方案,以及要注意的一些事情。
     
    1,head里边加入代码:
    <meta name=”viewport” content=”width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no”>
    (H5页面窗口自动调整到设备宽度,并禁止用户缩放页面)
     
    这段代码的几个参数解释:
    width = device-width:宽度等于当前设备的宽度
    initial-scale:初始的缩放比例(默认设置为1.0)
    minimum-scale:允许用户缩放到的最小比例(默认设置为1.0)
    maximum-scale:允许用户缩放到的最大比例(默认设置为1.0)
    user-scalable:用户是否可以手动缩放(默认设置为no,因为我们不希望用户放大缩小页面)
     

     
    第一种写法:
    html,body{font-size: 62.5% } 各大主流浏览器的fong-size:1rem=16px;这是默认的浏览器;  后边的布局按照正常的写法即可

     
    第二种写法:rem布局非常简单,首页你只需在页面引入这段原生js代码就可以了
    <script type=”text/javascript”>
    (function (doc, win) { var docEl = doc.documentElement, resizeEvt = ‘orientationchange’ in window ? ‘orientationchange’ : ‘resize’, recalc = function () { var clientWidth = docEl.clientWidth; if (!clientWidth) return; if(clientWidth>=640){ docEl.style.fontSize = ‘100px’; }else{ docEl.style.fontSize = 100 * (clientWidth / 640) + ‘px’; } }; if (!doc.addEventListener) return; win.addEventListener(resizeEvt, recalc, false); doc.addEventListener(‘DOMContentLoaded’, recalc, false); })(document, window);
    </script>
    这是rem布局的核心代码,这段代码的大意是:
    如果页面的宽度超过了640px,那么页面中html的font-size恒为100px,否则,页面中html的font-size的大小为: 100 * (当前页面宽度 / 640)
     
    1,用rem布局,需要先设置html{ font-size:100px;},然后px/100
     
    2,在rem布局中,页面中模块间距离一般为0.2rem。字体的大小一般分为四个档       次 0.2rem, 0.24rem ,0.28rem, 0.32rem。
     
    3,背景图片平铺记得加:{background-size: 100% 100%;} 数字可以根据需要设置4,页面中的图片:{ 100%; display: block;height: 100%;} 需要这样来设置
     
    5,   宽高最好采用100%来做
     
    6,配合媒体查询来设置不同的设备里的字体大小
        
     a,  简写语法
    @media (min-800px) {} 当页面大于800px的时候执行它里边的CSS
    b, 复杂表达式
    @media (min-800px) and (max-1200px) {} 当页面大于800px,小于1200px的时候执行它里边的CSS
    c, 高度和宽度媒体查询
    @media (min-800px) and (min-height:400px) {} 当页面宽度大于800px,高度大于400px的时候执行它里边的CSS
    第三种写法可采用弹性盒子模型来做,下一章节再讲解
  • 相关阅读:
    织梦DedeCms网站首页不生成html文件动态显示方法
    PHP7.0下安装DEDE织梦 出现 GD不支持的解决方法
    DEDECMS5.7支持伪静态的方法
    DEDECMS全站伪静态设置方法
    设置 SSH 通过密钥登录
    Windows安装OpenSSH服务
    VS Code远程开发工具错误-找不到SSH安装
    帝国CMS自定义列表的排序
    帝国CMS灵动标签e:loop的使用方法
    cisco 3750交换机堆叠后配置恢复方法
  • 原文地址:https://www.cnblogs.com/amy-1205/p/5826702.html
Copyright © 2011-2022 走看看