在线客服
扫描二维码
下载博学谷APP
扫描二维码
关注博学谷微信公众号
相信对于想要学习移动端设计和开发的同学们来讲，对要掌握的基础知识还是迷迷糊糊的。本文的目的就是移动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流式布局 知识讲解
相关推荐 更多
浅析HTML5、CSS3和jQuery
众所周知，网页制作渐渐演变出了Web前端开发，而HTML5、CSS3、jQuery三大要素则组成了Web前端开发。对于想要入门Web前端开发的小伙伴，弄懂HTML5、CSS3和jQuery真的很重要，因此小编就好好跟大家介绍一下。
8895
2019-07-25 17:32:53
2019年前端与移动开发培训就业方向多不多？
前端与移动开发是目前互联网中的热门就业方向。但是随着前端多元化的发展，企业对于人才的需求在不断增多的同时，对从业人员的技术水平也提升了要求。因此想通过简单的自学就找到高薪的前端工作不再想几年前那样容易。所以建议想同时前端与移动开发的朋友尽可能通过参加前端与移动开发培训完善并提升下自己的实力。那2019年前端与移动开发培训的就业方向多不多呢？
7838
2019-08-15 16:41:13
Web前端开发语言有哪些？各自有什么优势？
Web前端开发语言有哪些？各自有哪些优势？就目前Web前端开发可能涉及的语言来讲，有PHP语言、JavaScript、Ruby、HTML5、Java和Python。当然并不是说以上这些语言前端开发工程师都必须掌握，其实只选择一两门熟练掌握即可。下面我们来看看这些Web前端开发语言的具体介绍和自身的优势。
17036
2020-01-12 16:30:51
前端开发中绝对路径和相对路径的区别是什么？
前端开发中绝对路径和相对路径的区别是什么？绝对路径和相对路径主要的区别是域名是否是完全网站，起作用是相同的。绝对路径指的是包含域名的完整网址，相对路径指的是不包含域名的被链接页面相对于当前页面的相对网址。
11530
2020-07-16 11:51:15
前端要学多久才能去工作？具备什么技能？
零基础的初学者系统学习前端知识，学完差不多需要6个月左右的才能找工作。有一定基础的同学能够更快掌握前端技术。学习前端找工作要多久因人而异，更应该注意的是学习质量才对。只有学到了有用的技能才能不愁找不到工作。
9328
2021-01-29 16:22:03
