在线客服
扫描二维码
下载博学谷APP
扫描二维码
关注博学谷微信公众号
意见反馈

博学谷 > 资讯

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

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

相信对于想要学习移动端设计和开发的同学们来讲，对要掌握的基础知识还是迷迷糊糊的。本文的目的就是移动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>

<head>

<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>

</body>

</html>

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

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

<!DOCTYPE html>

<head>

<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>

</body>

</html>

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

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

<!DOCTYPE html>

<head>

<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>

</body>

</html>

D、等分布局

<!DOCTYPE html>

<head>

<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>

</body>

</html>

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

Web前端技术 Web前端入门常见问题

— 申请免费试学名额 —

在职想转行提升，担心学不会？根据个人情况规划学习路线，闯关式自适应学习模式保证学习效果
讲师一对一辅导，在线答疑解惑，指导就业！

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

相关推荐 更多

前端与移动开发培训班都学什么？学完有什么用？

前端与移动开发培训班都学什么？学完有什么用？博学谷的前端与移动开发培训课程包括，Vue、React、Angular三大框架，全栈工程师的前端技术、Node.js相关后台技术、HTML5移动方向开发技术等等。零基础小白学完该课程就能马上就业，有一定基础的在职人员学完也能提升自我能力，升职加薪。

9143

2019-12-16 17:36:08

Web前端培训Web前端入门就业前景
前端与移动开发就业班费用高不高？那些人适合学习？

前端与移动开发就业班费用高不高？那些人适合学习？大家都了解目前互联网领域前端与移动开发、后台开发、大数据开发、UI设计等等都是高薪的岗位。大家可以通过参加相应培训课程快速进入相应的工作岗位，但是报名培训班的费用高不高呢？那些人适合学习前端与移动开发呢？

9317

2019-09-12 17:56:57

Web开发Web前端入门培训多少钱
Vue是什么？一文带你认识Vue

Vue作为前端框架三巨头之一，以其轻量易用著称，纵观它的整个发展也是极其迅速的。在前端的开发中，Vue已经成为每个前端开发者的必须掌握的技能。那么Vue是什么？下面我们就来带大家用一篇文章的时间全面认识Vue。感兴趣的小伙伴就赶紧一起来看看吧~

8982

2020-04-22 14:31:56

Web前端入门前端框架
HTML初级小白入门学习

前端开发三大基础技术之一就是HTML，今天的这套HTML入门学习教程，专门针对初级小白这样的学习者。如果你想从零开始学HTML，本文将带你初步了解下HTML，然后大致讲一下HTML的构成，最后在告诉大家“初级小白应该如何学HTML”。总之，HTML并不神秘也并不深奥，相反它非常好玩，下面我们一起来入门学习HTML吧~

8248

2020-07-31 16:42:44

Web前端入门零基础入门网页开发
女孩子做前端是青春饭吗？适合web开发吗？

其实年龄并不是是衡量职业生涯的一个标准，无论是男性还是女性，如果有有丰富的前端开发经验，随着经验的不断积累，在职场中的优势越明显。强化内功，哪怕无法成为最前面的前端开发大牛，但也不会成为被淘汰的一员。

8117

2020-11-25 14:07:14

Web前端技术就业前景