zoukankan      html  css  js  c++  java
  • 移动端开发

    移动端开发:
    首先设备大致分为4种:手机端: <768px
    ipad端:769 - 991px
    pc端:992 - 1200px
    超大屏幕:>1200px

    响应式布局:Ethan Marcotte在2010年5月份提出的概念,意思是一个网站能够兼容多个终端,而不是
    为每个终端做一个特定的版本。这个概念是为解决移动互联网浏览而诞生的。
    优点: 面对不同分辨率设备灵活性强
    能够快捷解决多设备显示适应问题
    缺点: 兼容各种设备工作量大,效率低下
    代码累赘,会出现隐藏无用的元素,加载时间加长
    其实这是一种折中性质的设计解决方案,多方面因素影响而达不到最佳效果
    一定程度上改变了网站原有的布局结构,会出现用户混淆的情况
    用法:@media
    例:手机端@media screen and (max-767px){}
    平板端@media screen and (min- 769px) and (max- 999px) {}
    电脑端@media screen and (min- 1000px){}
    建议:宽度设置100%自适应,网页头部、尾部高度格局都不变,其余自适应。

    下面来个小例子:

    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <title>Title</title>

    <!--<link rel="stylesheet" href="./CSS/PC.css">-->
    <!--<link rel="stylesheet" href="./CSS/APP.css">-->
    <!--<link rel="stylesheet" href="./CSS/平板.css">-->


    <style type="text/css">
    /*PC端*/
    @media screen and (min-1000px){
    .all{
    border: 1px solid goldenrod;
    100%;
    background-color: blueviolet;
    }
    .top{
    100%;
    height: 100px;
    background-color: #2aabd2;
    }
    .content{
    border: 1px solid red;
    100%;
    height: 300px;
    }
    .left{
    33.33%;
    height: 100%;
    background-color: darkmagenta;
    float: left;
    }
    .middle{
    33.33%;
    height: 100%;
    background-color: gold;
    float: left;
    }
    .right{
    33.33%;
    height: 100%;
    background-color: greenyellow;
    float: left;
    }
    .bottom{
    100%;
    height: 100px;
    background-color: blue;
    }

    }

    /*平板端*/
    @media screen and (min-768px)and (max-999px){
    .all{
    border: 1px solid goldenrod;
    100%;
    background-color: blueviolet;
    }
    .top{
    100%;
    height: 100px;
    background-color: #2aabd2;
    }
    .content{
    border: 1px solid red;
    100%;
    height: 300px;
    }
    .left{
    /* 33.33%;*/
    50%;
    height: 100%;
    background-color: darkmagenta;
    float: left;
    }
    .middle{
    /* 33.33%;*/
    50%;
    height: 100%;
    background-color: gold;
    float: left;
    }
    .right{
    /* 33.33%;*/
    /*height: 100%;*/
    /**/
    /*float: left;*/
    display: none;
    }
    .bottom{
    100%;
    height: 100px;
    background-color: blue;
    }

    }

    /*手机端*/
    @media screen and (max-767px){
    .all{
    border: 1px solid goldenrod;
    100%;
    background-color: blueviolet;
    }
    .top{
    height: 100px;
    background-color: #2aabd2;
    }
    .content{
    border: 1px solid red;
    100%;
    /*height: 300px;*/
    }
    .left{
    /* 33.33%;*/
    100%;
    /*height: 100%;*/
    height: 50px;
    background-color: darkmagenta;
    /*float: left;*/
    }
    .middle{
    /* 33.33%;*/
    100%;
    /*height: 100%;*/
    height: 50px;
    background-color: gold;
    /*float: left;*/
    }
    .right{
    /* 33.33%;*/
    100%;
    /*height: 100%;*/
    height: 50px;
    background-color: greenyellow;
    /*float: left;*/
    }
    .bottom{
    100%;
    height: 100px;
    background-color: blue;
    }
    }

    </style>


    </head>
    <body>

    <div class="all">
    <div class="top">top顶部</div>
    <div class="content">
    <div class="left">left左边</div>
    <div class="middle">middle中间</div>
    <div class="right">right右边</div>
    </div>
    <div class="bottom">bottom底部</div>
    </div>

    </body>
    </html>
  • 相关阅读:
    sql server 2008 评估期已过期解决办法 + vs2008破解(转) 狼人:
    发现godaddy亚太机房主机比较慢,怎样转到godaddy美国机房 狼人:
    模拟提交有文件上传的表单(通过http模拟上传文件) 狼人:
    WordPress 批量关闭和打开评论功能 狼人:
    英文seo外链资源整合,怎么样找国外博客资源? 狼人:
    WindowsServer2003+IIS6+ASP+NET+PHP+MSSQL+MYSQL配置说明 |备份于waw.cnblogs.com 狼人:
    Excel表格的35招必学秘技(学会计的快来转载,留着以后用) 狼人:
    MSN去窗口广告方法http://apatch.org/downloads/ 狼人:
    js 实现谷歌浏览器中隐藏标签后setInterval事件暂停 狼人:
    SQL Server 2008过期导致MSSQLSERVER服务无法启动 狼人:
  • 原文地址:https://www.cnblogs.com/zhaowenxin/p/5883700.html
Copyright © 2011-2022 走看看