移动端布局的心得
Posted It奋斗小青年
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了移动端布局的心得相关的知识,希望对你有一定的参考价值。
1.字体大小 font-sizepx/em/rem
- px像素
- em:根据父级的字体大小有关,1em表示是父级字体大小一致
- rem:根据html标签的字体大小有关,1rem表示和html标签字体大小一致,默认16px,
- rem:设置 nrem.表示把字体大小设置成和html标签的字体大小n陪,如果html没有设置则默认font-size:16px;
2.自定义字体:字体名字2字体src:url+format
<style> @font-face{ font-family:"demo字体"; src:url("路径地址") fromat("truetype"\'); } .customFont{ font-family:"demo字体"; } </style> <p>one</p> <p class=\'customFont\'>two</p>
3. 居中适配的问题
-webkit-transform: translate(-50% -50%);
-moz-transform: translate(-50% -50%);
-ms-transform: translate(-50% -50%);
-o-transform: translate(-50% -50%);
transform: translate(-50% -50%);
}
注意:在定位的时候,一定不要忘了写top、left、right、bottom的值。虽然在有些手机上不写样式不会乱掉,看起来没问题。但是为了确保万一,一定要写上。不要犯这种低级错误。
之前在写移动端的页面的时候就时忘了写这几个属性的值,而是直接用margin-left、margin-top直接定位,结果在发现在苹果手机上出现了样式排版偏移的问题。
position: absolute/fixed/relative; left: 0; right: 0; bottom: 0; top: 0;
4.重点说说弹性布局flex的兼容问题:
弹性布局虽然好用,但兼容性并不太好,除了浏览器实现有差异外,PC与移动端也有差异。
display: flex 与 display: box都用于弹性布局。display: box是2009年的命名,display: flex是2012之后的命名。但display: flex不能完全的向后兼容,有些浏览器不支持。(display: box 很少用)
div{ //2009后的浏览器生效 display:-webkit-box; //2011后的浏览器生效 display:-webkit-flex; //2012后的浏览器生效 display:flex; }
display:flex
PC端:Chrome和Firefox支持度都很好,IE不支持。
display:box
PC端:Chrome和Firefox支持度都很好,IE不支持。
移动端:
- iOS Safari支持,UC支持,微信浏览器不支持
- Android 原生浏览器 UC 支持
总结起来:IE都不支持,因此这个技术用于移动端是比较理想的,因为移动端的浏览器内核基本为webkit。
.container{ display: -webkit-box; /* Chrome 4+, Safari 3.1, iOS Safari 3.2+ */ display: -moz-box; /* Firefox 17- */ display: -webkit-flex; /* Chrome 21+, Safari 6.1+, iOS Safari 7+, Opera 15/16 */ display: -moz-flex; /* Firefox 18+ */ display: -ms-flexbox; /* IE 10 */ display: flex; /* Chrome 29+, Firefox 22+, IE 11+, Opera 12.1/17/18, Android 4.4+ */ }
5.文本溢出隐藏显示省略号
单行语法:
.text{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
多行语法:
.text { overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
- -webkit-line-clamp 用来限制在一个块元素显示的文本的行数,这是一个不规范的属性(unsupported WebKit property),它没有出现在 CSS 规范草案中。
- display: -webkit-box 将对象作为弹性伸缩盒子模型显示 。
- -webkit-box-orient 设置或检索伸缩盒对象的子元素的排列方式 。
- text-overflow: ellipsis 以用来多行文本的情况下,用省略号“…”隐藏超出范围的文本
6. 移动web触动事件
6.1on和addEventListener
1.写法上addEventListener中的相应事件不用加on前缀(onclick-->click)
2.on事件多次添加,之后执行最后一次,addEventListener事件每次添加都会生效
3.addEventListener:执行顺序是冒泡规则,:从小到大(从儿子到祖宗)
4.addEventListener:事件捕获顺序规则:从大到小(从祖宗到儿子)
addEventListener(\'touchmove\',function(e){ console.log(e.target); //表示手触动的当前元素对象 console.log(e.touches); //页面上的所有触摸点 console.log(e.touches[0]); //touches[0]触摸点的第一个元素有许多可以使用的参数 })
以上是关于移动端布局的心得的主要内容,如果未能解决你的问题,请参考以下文章