移动web(一)移动web基础知识点、流式布局
来源:互联网 发布:赖宁的真正死因 知乎 编辑:程序博客网 时间:2024/05/21 18:50
移动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"> <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>
阅读全文
0 0
- 移动web(一)移动web基础知识点、流式布局
- 移动web开发一之流式布局
- 移动web知识点
- 移动Web开发基础-rem布局
- 移动Web开发基础-flexible布局方案
- 移动Web开发基础-flex弹性布局(兼容写法)
- 2016移动web(一)
- 移动Web窗体基础
- 移动web之响应式布局
- 移动web开发响应式布局总结
- 移动web(四)响应式布局、媒体查询
- 移动设备web自适应布局
- 前端移动web布局总结
- 移动Web开发基础-百分比+flex布局方案
- 移动Web开发基础-利用VW单位适配布局
- MyEclipse移动Web模拟器指南(一)
- 移动web前端小结(一)
- 移动Web开发基础-Viewport
- 堆、栈、队列的区别
- IntelliJ IDEA 常用设置讲解(细看)
- 卸载CentOS6.5自带的JDK
- Coursera | Andrew Ng (01-week-1-1.4)—为什么深度学习会兴起?
- 数据结构年终总结
- 移动web(一)移动web基础知识点、流式布局
- jackson
- selenium启动ie配置,实现inprivate浏览,禁止ie缓存
- 04-Robot Framework 之 BuiltIn库(2)
- 底部菜单被输入法顶上去的解决方案
- 补习:C# 面向对象三大特性:封装、继承、多态
- 在TextView中左侧加入图片
- django链接数据库报错Error loading MySQLdb module:No module named MySQLdb
- ios 协议的使用