在线客服
扫描二维码
下载博学谷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还有学习兴趣不妨上博学谷观看在线学习视频。
— 申请免费试学名额 —
在职想转行提升,担心学不会?根据个人情况规划学习路线,闯关式自适应学习模式保证学习效果
讲师一对一辅导,在线答疑解惑,指导就业!
相关推荐 更多
JavaScript常用内置对象有哪些?
JavaScript常用内置对象有哪些?一般来说,大家最常用的有浏览器对象模型、文档对象模型和全局JavaScript对象三类。下面小编就来分析一下这三类具体的内置对象及其作用。
8266
2019-08-21 18:31:00
前端工程师与UI设计师的职责划分
前端工程师和UI设计师的工作内容都是围绕前端页面的视觉体验和用户体验,但二者在岗位定位以及工作职责上有明显的不同。UI设计属于产品方向,重点在于设计视觉感官;前端工程师属于开发方向,主要是通过代码实现页面功能是视觉效果。两者具体的职责划分如下:
6851
2019-11-26 19:15:05
Web前端面试排序算法总结
Web前端面试排序算法总结,前端工程师面试过程中会涉及排序算法的考察,经常用到的排序算法有冒泡排序、选择排序、插入排序、希尔排序、归并排序、快速排序、堆排序、计数排序、桶排序、基数排序。
5244
2020-03-24 14:14:19
前端开发就业方向有哪些?
前端开发就业方向有哪些?为什么要学习前端开发?学完前端开发能很快找到工作吗?对于0基础想要入行互联网的同学们而言,Web前端因为其简单易学,应用广泛的特性,成为同学们的首选。下面我们就一起了解一下前端开发就业方向都有哪些吧!
5528
2020-08-07 10:15:29
Web前端学习容易吗?Web入门难吗?
前端是否容易学答案因人而异,主要取决于你学习的决心。Web前端入门门槛低,主要体现在HTML和CSS上,HTML是结构标签,CSS是样式配置,入门非常简单,网上有很多相关视频可以学习,也可以找前端相关书籍来看。
4678
2021-03-30 15:19:34
热门文章
- 前端是什么
- 前端开发的工作职责
- 前端开发需要会什么?先掌握这三大核心关键技术
- 前端开发的工作方向有哪些?
- 简历加分-4步写出HR想要的简历
- 程序员如何突击面试?两大招带你拿下面试官
- 程序员面试技巧
- 架构师的厉害之处竟然是这……
- 架构师书籍推荐
- 懂了这些,才能成为架构师 查看更多
扫描二维码,了解更多信息
