移动web(一)移动web基础知识点、流式布局
2017-12-14 10:21
399 查看
移动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】移动端经典的几个模块布局
1)左侧固定,右侧自适应左侧盒子直接写死宽高,并且浮动;右侧盒子直接不写宽,直接用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>
2)圣杯布局(两侧固定,中间自适应 )
左右的盒子都写固定的宽高,然后分别左浮动 右浮动,中间的盒子直接用margin去挤出距离,不写宽自动内减,右边html里面浮动的结构一定要放到标准流盒子的前面。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>圣杯布局(两侧固定中间自适应)</title> <style> * { margin: 0; padding: 0; } .wrap { width:100%; height:400px; } .left { width:150px; height:400px; float: left; background: pink; } .right { width:150px; height:400px; float: right; background: yellow; } .center { margin-left: 150px; margin-right: 150px; height:400px; background: blue; } </style> </head> <body> <div class="wrap"> < da95 span class="hljs-tag"><div class="left"></div> <div class="right"></div> <div class="center"></div> </div> </body> </html>
3)右侧盒子固定,左侧自适应
右侧盒子直接写死宽高,并且浮动,左侧盒子直接不写宽,直接用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>
4)中间固定,两边自适应
中间盒子直接写死宽高,并且定位居中,左右侧盒子直接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>
5)等分布局
<!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开发基础-百分比+flex布局方案
- 移动WEB基础知识
- 移动Web开发基础-利用VW单位适配布局
- 移动web开发一之流式布局
- 移动web开发基础知识
- 移动web的基础知识
- 移动Web开发基础-rem布局
- 移动web开发基础知识
- 移动WEB基础知识(上)(基本概念,视口,移动浏览器)
- WEB开发的那些基础知识(3)--CSS的布局
- javaWeb基础知识----JSTL
- web开发基础知识之html常用标签和dom结构
- Web开发中的一些基础知识
- 安卓界面基础知识总结(一):LinearLayout布局的常见属性
- 个人知乎 ##基础二-WEB知识
- [Java面试三]JavaWeb基础知识总结.
- Android基础知识:常见布局、logcat相关和文件读写
- 移动项目开发笔记(C#泛型编程基础知识总结)
- 【JavaWeb】基础知识总结Servlet
- 变换及移动基础知识