博学谷 > 资讯 > 前端 > 移动web基础知识介绍 学习干货

原创 移动web基础知识介绍 学习干货

发布时间:2019-08-02 12:37:32 浏览 752 来源:博学谷资讯 作者:照照

    相信对于想要学习移动端设计和开发的同学们来讲,对要掌握的基础知识还是迷迷糊糊的。本文的目的就是移动web基础知识针对刚刚入门的同学,介绍移动web基础知识,希望帮助还在迷茫的人找到一点学习的方向。

     

    移动web基础知识

     

    1、为什么要去研究移动web

     

    移动web已经从趋势变成了一个主流了,互联网的流量入口已经大于PC端的流量入口

     

    2、兼容性问题

     

    在国内的移动web浏览器绝大部分都是基于webkit内核的,所以一些css3和h5的新特性绝大部分都被支持,需要添加前缀,但是,不同机型之间可能会略有不同,所以需要自己踩坑。

     

    3、移动web和PC相比的差异性在哪里

     

    移动web的只要核心就是做自适应的布局,在手持设备上基本都是通栏,并且布局的细节比PC端要少,文字内容和模块也相对偏少

     

    4、移动端常见的布局–流式布局(百分比布局)

     

    (1)流式布局(百分比布局)

     

    流式布局是移动web开发使用的常用布局方式之一。

     

    (2)流式布局下的几个页面特征:

     

    宽度自适应,高度写死,不能百分百去还原设计图

     

    一些小ICON 图标等都是写死的 不是所有的东西都是自适应的,一般都是模块会呈现自适应

     

    一些产品插入图也就是img等都默认设置宽度百分百,让其自动保持等比例缩放,一般不予写死字体大小等都是写死的

     

    注意:常用的是rem结合流式布局的写法,使用rem去计算高度,百分比去计算宽度,实现宽高完全自适应。

     

    (3)移动端经典的几个模块布局

     

    A、左侧固定,右侧自适应

     

    左侧盒子直接写死宽高,并且浮动;右侧盒子直接不写宽,直接用margin-left去挤出距离,这个盒子默认会自动内减

     

    <!DOCTYPE html>

     

    <html lang="en">

     

    <head>

     

    <meta charset="UTF-8">

     

    <title>左侧固定右侧自适应</title>

     

    <style>

     

    * {

     

    margin: 0;

     

    padding: 0;

     

    }

     

    .left {

     

    width:150px;

     

    height:400px;

     

    float: left;

     

    background: pink;

     

    }

     

    .right {

     

    margin-left: 150px;

     

    height:400px;

     

    background: yellow;

     

    }

     

    </style>

     

    </head>

     

    <body>

     

    <div class="left"></div>

     

    <div class="right"></div>

     

    </body>

     

    </html>

     

    B、右侧盒子固定,左侧自适应

     

    右侧盒子直接写死宽高,并且浮动,左侧盒子直接不写宽,直接用margin-left去挤出距离,这个盒子默认会自动内减,注意:右侧盒子在结构上在左侧盒子的前面,先浮动,后标准

     

    <!DOCTYPE html>

     

    <html lang="en">

     

    <head>

     

    <meta charset="UTF-8">

     

    <title>右侧固定左侧自适应</title>

     

    <style>

     

    * {

     

    margin: 0;

     

    padding: 0;

     

    }

     

    .right {

     

    width:200px;

     

    height:400px;

     

    float: right;

     

    background: green;

     

    }

     

    .left {

     

    margin-right: 200px;

     

    height:400px;

     

    background: yellow;

     

    }

     

    </style>

     

    </head>

     

    <body>

     

    <div class="right"></div>

     

    <div class="left"></div>

     

    </body>

     

    </html>

     

    C、中间固定,两边自适应

     

    中间盒子直接写死宽高,并且定位居中,左右侧盒子直接width百分50%,并且浮动,并配合padding和内减去实现自适应

     

    <!DOCTYPE html>

     

    <html lang="en">

     

    <head>

     

    <meta charset="UTF-8">

     

    <title>中间固定两侧自适应</title>

     

    <style>

     

    * {

     

    margin: 0;

     

    padding: 0;

     

    }

     

    .wrap {

     

    width:80%;

     

    height:400px;

     

    margin:0 auto;

     

    background: gray;

     

    }

     

    .left {

     

    width:50%;

     

    height:100%;

     

    float: left;

     

    background: green;

     

    padding-right: 50px;

     

    box-sizing:border-box;

     

    /*

     

    在设置了box-sizing为border-box后,

     

    容器的高宽就是实际容器的高宽,

     

    而不是单纯指的是内容区的大小。

     

    这时候的高宽计算方式把padding和border大小也算进来了。

     

    */

     

    }

     

    .right {

     

    width:50%;

     

    height:100%;

     

    float: right;

     

    background: blue;

     

    padding-left: 50px;

     

    box-sizing:border-box;

     

    }

     

    .center {

     

    width:100px;

     

    height: 400px;

     

    background: orange;

     

    margin:0 auto;

     

    position: relative;

     

    }

     

    </style>

     

    </head>

     

    <body>

     

    <div class="wrap">

     

    <div class="left"></div>

     

    <div class="right"></div>

     

    <div class="center"></div>

     

    </div>

     

    </body>

     

    </html>

     

    D、等分布局

     

    <!DOCTYPE html>

     

    <html lang="en">

     

    <head>

     

    <meta charset="UTF-8">

     

    <title>等分布局</title>

     

    <style>

     

    * {

     

    margin: 0;

     

    padding: 0;

     

    }

     

    .wrap {

     

    width:100%;

     

    height:400px;

     

    background: gray;

     

    }

     

    .content {

     

    width:25%;

     

    height:100%;

     

    float: left;

     

    }

     

    .one {

     

    background: red;

     

    }

     

    .two {

     

    background: yellow;

     

    }

     

    .three {

     

    background: green;

     

    }

     

    .four {

     

    background: blue;

     

    }

     

    </style>

     

    </head>

     

    <body>

     

    <div class="wrap">

     

    <div class="content one"></div>

     

    <div class="content two"></div>

     

    <div class="content three"></div>

     

    <div class="content four"></div>

     

    </div>

     

    </body>

     

    </html>

     

    介绍完了移动web基础知识,不知道大家都掌握了多少,如果对移动web还有学习兴趣不妨上博学谷观看在线学习视频。

上一篇:编辑工具Sublime和VS code优缺点对比 下一篇:CSS流式布局 知识讲解

相关推荐 更多

最新文章

扫描二维码,回复"前端"获取90G资料包

4887铁算结果开奖结果小说