zoukankan      html  css  js  c++  java
  • 用flex和rem实现移动端页面

    登录页面案例代码:

    html代码:

    <!DOCTYPE html>
    <html>
    <head>
    <title>登录</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
    </head>
    <link rel="stylesheet" href="./css/login.css" type="text/css"/>
    <body>
    <div class="login">
    <div class="loginheader">
    <h2>登录页面</h2>
    </div>
    <div class="logincontent">
    <input type="text" value="" placeholder="用户名">
    <input type="password" value="" placeholder="密码">
    <button>登录</button>
    </div>
    <div class="registerjump">
    <a href="">没有账号,去注册</a>
    </div>
    </div>
    </body>
    </html>
    <script type="text/javascript" src="./js/common.js"></script>

    css代码:

    *{
    font-family: "微软雅黑";
    }
    body,html{
    margin:0;
    padding:0;
    background: #fcfcfc;
    }
    .login{
    display: flex;/*flex布局*/
    flex-direction:column;/*主轴方向垂直方向,从上到下*/
    }
    .loginheader{
    height: 1.2rem;
    margin-top:1.6rem;
    }
    .loginheader h2{
    font-size: 0.52rem;
    color: #fff;
    font-weight: 500;
    color: #BA55D3;
    text-align: center;
    }
    .logincontent{
    margin-top:0.3rem;
    display: flex;
    flex-direction:column;
    }
    .logincontent input{
    75%;
    height: 0.5rem;
    margin: 0.2rem auto;
    background: #fcfcfc;
    border-top: 1px #fcfcfc solid;
    border-left: 1px #fcfcfc solid;
    border-right: 1px #fcfcfc solid;
    border-bottom: 1px #ccc solid;
    outline: none;/*去除输入框点击时的外边框*/
    box-shadow: none;/*去除输入框点击时的外边框*/
    font-size: 0.24rem;
    }
    .logincontent button{
    height: 0.7rem;
    75%;
    margin: 0.3rem auto;
    border: 0;
    background: #BA55D3;
    color: #fff;
    outline: none;
    box-shadow: none;
    font-size: 0.24rem;
    }
    .registerjump{
    display: flex;
    75%;
    margin: 0 auto;
    justify-content: flex-end;/*水平右对齐*/
    }
    .registerjump a{
    font-size: 0.24rem;
    text-decoration: none;
    }

    js代码:

    // 手机端的适配代码
    (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);

    九宫格案例代码:

    <!DOCTYPE html>
    <html>
    <head>
    <title>商品首页</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
    <style type="text/css">
    *{
    font-family: "微软雅黑";
    }
    body,html{
    margin:0;
    padding:0;
    }
    .goodsindex .goodsgrid{
    display: flex;
    flex-wrap:wrap;
    flex-direction: column;
    padding: 0.05rem
    }
    .goodsindex .goodsgrid .row{
    display: flex;
    }
    .goodsindex .goodsgrid .row .item1{
    flex:1;
    font-size: 0.24rem;
    padding:0.05rem 0.05rem 0 0.05rem;

    }
    .goodsindex .goodsgrid .row .item2{
    flex:1;
    font-size: 0.24rem;
    padding:0.05rem 0.05rem 0 0.05rem;

    }
    .goodsindex .goodsgrid .row .item3{
    flex:1;
    font-size: 0.24rem;
    padding:0.05rem 0.05rem 0 0.05rem;
    }
    .goodsindex .goodsgrid .row .item1 img,.goodsindex .goodsgrid .row .item2 img,.goodsindex .goodsgrid .row .item3 img{
    100%;
    }
    </style>
    </head>
    <body>
    <div class="goodsindex">
    <div class="goodsgrid">
    <div class="row">
    <div class="item1"><img src="./image/1.jpg"></div>
    <div class="item2"><img src="./image/2.jpg"></div>
    <div class="item3"><img src="./image/3.jpg"></div>
    </div>
    <div class="row">
    <div class="item1"><img src="./image/4.jpg"></div>
    <div class="item2"><img src="./image/5.jpg"></div>
    <div class="item3"><img src="./image/4.jpg"></div>
    </div>
    <div class="row">
    <div class="item1"><img src="./image/1.jpg"></div>
    <div class="item2"><img src="./image/2.jpg"></div>
    <div class="item3"><img src="./image/3.jpg"></div>
    </div>

    </div>
    </div>
    </body>
    </html>
    <script type="text/javascript" src="./js/common.js"></script>

  • 相关阅读:
    《ASP.NET Core跨平台开发从入门到实战》Web API自定义格式化protobuf
    .NET Core中文分词组件jieba.NET Core
    .NET Core 2.0及.NET Standard 2.0
    Visual Studio 2017 通过SSH 调试Linux 上.NET Core
    Visual Studio 2017 ASP.NET Core开发
    Visual Studio 2017正式版离线安装及介绍
    在.NET Core 上运行的 WordPress
    IT人员如何开好站立会议
    puppeteer(二)操作实例——新Web自动化工具更轻巧更简单
    puppeteer(一)环境搭建——新Web自动化工具(同selenium)
  • 原文地址:https://www.cnblogs.com/JKMI/p/9354757.html
Copyright © 2011-2022 走看看