集团主站
欢迎来到成都达内官方网站!达内—美国上市公司 亿元级外企IT培训企业!
成都it培训哪家好
成都it培训哪家好
全国服务监督电话:15023458194  |   联系客服   |
当前位置:主页 > 培训课程 > web前端 >

成都前端学习路线:移动端网站开发前端学习总结

发布者: 成都达内     浏览次数:     发布时间:2019-02-20 10:59:19

移动端网站开发前端学习总结:移动端适配可以使用lib-flexible(也可配合百分比宽度一起使用)十分适用于webapp适配,Font-size默认为12px 以rem为单位。...

  成都前端学习路线:移动端网站开发前端学习总结

  1.关于适配:

  移动端适配可以使用lib-flexible(也可配合百分比宽度一起使用)十分适用于webapp适配

  Font-size默认为12px 以rem为单位。

  注意:应用lib-flexible与响应式布局(媒介查询应用不同的样式)难以兼容,因为lib-flexible会改变媒体查询关键的width属性 使其不准确

  .container设置max-width: 640px;width: 100%;。应用lib-flexible时也可设置为固定宽度width:10rem;overflow: hidden;(二者都是将屏幕的width等分出来的单位,显示效果一般无二)

  成都前端学习路线

  2.webapp的1px边框过粗问题(还没发现简单可靠的方案)

  现在大部分手机的分辨率很高,一个css像素1px,可能相当于2个甚至3个物理分辨率像素

  导致1px会比实际的粗(虽然使用lib-flexible,但在在安卓设备下,此问题依然存在)

  2.input 有placeholder情况下不要设置行高,否则会偏上

  placeholder属性会使文本位置偏上时解决办法:line-height: (和input框的高度一样高)---pc端解决方法 line-height:normal ---移动端解决方法

  3.为了更好的兼容,会使用完整的viewport设置()

  viewport也可作为宽度单位,一些参数设定,width viewport 宽度(数值/device-width),height viewport 高度(数值/device-height),initial-scale 初始缩放比例,user-scalable 是否允许用户缩放(yes/no)。

  Display:flex;可以达到很好的布局效果,自适应效果不错 注意:定义了flex、align-items等 后 子元素magain 和 float属性受影响甚至失效

  5.有表单元素的地方一般需要外面加上form元素做父容器,并加上submit

  6.在input框获得焦点时文字被清空用value 在input框输入文字时被清空用placeholder

  7.当border对布局产生影响时(border会导致容器所占面积变大),可用属性box-sizing:border-box解决(border在元素内部了,不会在外面占空间)

  移动端网站开发前端学习总结

  8.webkit表单元素的默认外观怎么重置

  .css{-webkit-appearance:none;}

  清除input默认样式

  .Input{border-color:transparent;outline:none;;border-width 0;:padding:0 0;}

  9.媒体查询:给不同屏幕大小的手机设置特殊样式

  @media only screen and (min-device-width : 320px) and (max-device-width : 375px){}

  可用于图片适配查询devicePixelRatio=2,采用2x的背景图(background-size:contain)

  11.用aftet伪类和定位可以对盒子达到特殊的修饰效果

  为盒子底部加上一条宽度为96%的边框

  .div:after{

  position: absolute;

  bottom: 0;

  left: 4%;

  content: '';

  display: block;

  height: 1px;

  width: 96%;

  }

  12.input::-webkit-input-placeholder{ color: #******;}//改变提示字体的颜色,不会改变用户输入字的颜色(pc端页面还要写兼容性)

  13.font-family: 'Microsoft YaHei','Cabin', 'Arial', 'STXihei', '华文细黑', 'SimSun', '宋体', 'Heiti', '黑体', 'STSong';(默认微软雅黑,如果没有微软雅黑再用其它的字体,电脑端也是一样)

  父元素如果有旋转属性或者scare放大缩小属性都会使得pisition:flex失灵变成pisition:absolute的效果

  15.用p标签与高度相关时必需要设置line-hight(没有特殊要求时设为font-size的值),因为p标签会默认行高为字体大小加上下留的空白高度(默认上下留白)

  成都前端学习路线:移动端网站开发前端学习总结

  16.去除-webkit-的滚动条

  #content::-webkit-scrollbar{ display:none; }

  设置滚动条样式

  /*滚动条宽度*/

  #content::-webkit-scrollbar{ width:5px; }

  /*滚动条滑块*/

  #content::-webkit-scrollbar-thumb{background:rgba(0,0,0,0.25); border-radius:3px; }

  /*滚动条的整个背景*/

  #content::-webkit-scrollbar-track-piece{ background:#eee; }

  text-align:justify规定如何对齐行文本进行对齐和分隔,对于长文本行内整齐效果好

  注意(多行使用时当文字两端占满整行宽度时才有效.)

  18.阻止旋转屏幕时自动调整字体大小html, body, form, fieldset, p, div, h1, h2, h3, h4, h5, h6 {-webkit-text-size-adjust:none;}

  19.禁止用户选中文字

  -webkit-user-select:none

  20.flex布局兼容性问题(移动端兼容性较为良好)

  Android ;2.3 开始就支持旧版本 display:-webkit-box;4.4 开始支持标准版本 display: flex;

  IOS: 6.1 开始支持旧版本 display:-webkit-box;,7.1 开始支持标准版本display: flex;

  移动端字体小于12px使用四周边框或者背景色块,可能出现安卓文字偏上bug问题,可以使用整体放大1倍再缩放scale,而且字体不要是奇数

  不足:改用a标签(有链接跳转的地方), 像最左、最右、居中此类有特点的位置要保证在任何情况下都能保持特点(比如居中用百分比定位,左右用flex布局属性、margin-最左用left、或者浮动), 不要只考虑展示效果(也要为交互便捷考虑比如有两个地方应用input range和select), 了解webkit对标签或input控件的渲染效果,内部的标签要活用不要只用div减少识别性和快捷性,关于文件放置相同功能模块的网页和css放在一个文件夹下面,index,login等跳转功能较多或模块的主体页面放在最外层,要写各种机型的兼容HTC、三星等(腾讯gituht上有)

(责任编辑:范老师)
最新开班
  • 成都Java培训班
    免费试听名额发放中...
  • 成都C++培训班
    免费试听名额发放中...
  • 成都PHP培训班
    免费试听名额发放中...
  • 成都网络工程培训班
    免费试听名额发放中...
  • 成都Unity3D培训班
    免费试听名额发放中...
  • 成都大数据培训班
    免费试听名额发放中...
  • 成都uid培训班
    免费试听名额发放中...
  • 成都会计培训班
    免费试听名额发放中...
  • 成都Python培训班
    免费试听名额发放中...
  • 成都嵌入式培训班
    免费试听名额发放中...
  • 成都web培训班
    免费试听名额发放中...
  • 成都软件测试培训班
    免费试听名额发放中...
在线留言
提交

校区地址:绵阳市涪城区临园路东段68号富临大都会7栋3单元9层12号

联系电话:15023458194

公交路线:富乐路口凯德广场(10路;29路;3路;15路;11路;15a路;71路)

校区地址:成都市锦江区东大街紫东楼端35号明宇金融广场19楼1906室

联系电话:15023458194

公交路线:芷泉街(18路;21路;43路;48路;104路;152路;335路 ) 地铁路线:东门大桥站(地铁2号线)

校区地址:成都市高新区奥克斯广场蜀锦路209号一楼商铺

联系电话:15023458194

公交路线:益州大道锦城大道口(18路;21路;43路;48路;104路;152路;335路 ) 地铁路线:孵化园(地铁1号线)

校区地址:成都锦江区东大街芷泉街229号东方广场C座3楼303

联系电话:15023458194

公交路线:芷泉街(188路;115路;515路;236路;505路;501路;84路 ) 地铁路线:东门大桥站(地铁2号线)

校区地址:成都市武侯区佳灵路3号红牌楼广场2号写字楼11楼1115号

联系电话:15023458194

公交路线:红牌楼东(11路;92路;100路;111路;139路;g28路;快速公交K1/K2) 地铁路线:红牌楼站(地铁3号线)

校区地址:成都市锦江区红星路二段70号四川日报大厦502-2

联系电话:15023458194

公交路线:市二医院站(6路;49路;102路;5路;37路;g92路;) 地铁路线:地铁市二医院(地铁3号线)

校区地址:成都市锦江区东大街芷泉段229号东方广场C座16层

联系电话:15023458194

公交路线:芷泉街(18路;21路;43路;48路;104路;152路;335路 ) 地铁路线:东门大桥站(地铁2号线)

校区地址:四川省成都市武侯区高新科技孵化园9号园区E座7楼

联系电话:15023458194

公交路线:益州大道锦城大道口(18路;21路;43路;48路;104路;152路;335路 ) 地铁路线:孵化园(地铁1号线)

校区地址:成都市人民南路一段86号“城市之心”大厦26楼

联系电话:15023458194

公交路线:成都市人民南路(6路;14路;42路;72路;76路;1010路;)

校区地址:成都市高新区奥克斯广场B座1708

联系电话:15023458194

公交路线:益州大道锦城大道口(18路;21路;43路;48路;104路;152路;335路 ) 地铁路线:孵化园(地铁1号线)

了解达内动态
关注成都达内教育公众号

首页 | 关于达内 | 课程中心 | 专家师资 | 视频教程 | 学员空间 | 校企合作 | 新闻资讯 | 就业指导 | 网站地图

2016-2025 达内时代科技集团有限公司 版权所有 京ICP证8000853号-56