1.移动web开发之流式布局
1.1 视口 视口(viewport)就是浏览器显示页面内容的屏幕区域。视口可以分为布局视口、视觉视 口和理想视口 1.1.1理想视口 ideal viewport 需要手动添加meta视口标签同时浏览器操作 1.2 二倍图1.2.1 物理像素&物理像素比 · PC端页面,1个px等于1个物理像素,但是移动的就不尽相同 · 一个px的能显示的物理像素点的个数,成为物理像素比或屏幕像素比 1.2.2背景缩放 background-size background-size属性规定背景图像的尺寸 background-size:背景图片宽度 背景图片高度; · 单位:长度|百分比|cover|contain; · cover把背景图像扩展至足够大,以使背景图像完全覆盖背景区域 · contain把图像扩展至最大尺寸,以使其宽度和高度完全适应内容区域 2.移动端技术解决方案 移动端浏览器基本以webkit内核为主,因此我们就考虑webkit兼容性问题。 私有前缀只需要考虑添加webkit即可。 2.1 css初始化 normalize.css 移动端css初始化推荐使用normalize.css ·Normalize.css:保护了有价值的默认值 ·Normalize.css:修复了浏览器的bug ·Normalize.css:是模块化 ·Normalize.css:拥有详细的文档 官网地址:http://necolas.github.io/normalize.css
2.2 css3盒子模型 box-sizing · 传统模式宽度计算:盒子的宽度 = css中设置的width + border + padding · css3盒子模型: 盒子的宽度 = css中设置的宽度width里面包含了border和padding 也就是说,我们的css3中的盒子模型,padding和border不会撑大盒子了 选择传统 or css3盒子模型? · 移动端可以全部css3盒子模型 · PC端如果完全需要兼容,我们就用传统模式,如果不考虑兼容性,我们就选择css3盒子模型 2.3 特殊样式 3. 移动端常见布局 3.1 流式布局(百分比布局) 3.2 二倍精灵图的做法 · 在ps里面把精灵图等比例缩放为原来的一半 · 之后根据大小测量坐标 · 注意代码里面background-size也要写:精灵图原来宽度的一半
4.flex布局 4.1 flex布局原理 flex是flexible Box的缩写,意为“弹性布局”,用来为盒状模型提供最大的灵活性,任何一个容器都可以指定为flex布局。 · 当我们为父盒子设为flex布局以后,子元素的float、clear和vertical-align属性将失效。 · 伸缩布局 = 弹性布局 = 伸缩盒布局 = 弹性盒布局 = flex布局 4.2 常见父项属性 4.2.2 属性值 flex-direction 属性决定主轴的方向(即项目的排列方向) 注意:主轴和侧轴是会变化的,就看flex-direction 设置谁为主轴,剩下的就是侧轴。而我们的子元素是跟着主轴来排列的
justify-content属性
flex-wrap 属性
flex-wrap:wrap 设置自动换行
align-items属性 align-items:stretch 拉伸 (子盒子不能设置高度 否则没有效果)
align-content 属性 设置侧轴上的子元素的排列方式(多行) 设置子项在侧轴上的排列方式并且只能用于子项出现换行的情况(多行),在单行下是没有效果的。 align-content 和 align-items 区别 · align-items 适用于单行情况下,只有上对齐、居中和拉伸 · align-content 适用于换行(多行)的情况下(单行情况下无效),可以设置上对齐、下对齐、居中、拉伸以及平均分配剩余空间等属性值。 · 总结就是单行找align-items 多行找align-content
flex-flow 属性 是flex-direction 和flex-wrap 属性的符合属性 flex-flow:row wrap;
4.3 flex布局子项常见属性 · flex子项占的份数 · align-self 控制子项自己在侧轴的排列方式 · order属性定义子项的排列顺序(前后顺序)
4.3.1 flex属性 flex属性定义子项目分配剩余空间,用flex来表示占多少份数 .item{ flex:<number>;默认是0 }
4.3.2 align-self 控制子项自己在侧轴上的排列方式 align-self属性允许单个项目有与其他项目不一样的对齐方式,可覆盖align-items属性。 默认值为auto,表示继承父元素的align-items属性,如果没有父元素,则等同于stretch。 4.3.3 order属性 定义项目的排列顺序 数值越小,排列越靠前,默认为0. 注意:和z-index不一样。
原文地址:https://www.cnblogs.com/senven9mo/p/13570671.html
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。