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

2019-01-21 02:37:45来源:博客园 阅读 ()

新老客户大回馈,云服务器低至5折

1.关于适配:

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

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

关于lib-flexible详解http://www.w3cplus.com/mobile/lib-flexible-for-html5-layout.html

 

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

lib-flexible的问题研究:https://www.cnblogs.com/lyzg/p/5117324.html

 

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

 

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

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

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

解决方法(利用transform达到零点几px的效果):

https://www.cnblogs.com/lunarorbitx/p/5287309.html

 

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

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

 

3.为了更好的兼容,会使用完整的viewport设置(<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0" />)

 

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

 

关于metahttp://www.cnblogs.com/libin-1/p/5979300.html

 

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

 Flex弹性布局详解:https://www.cnblogs.com/nuannuan7362/p/5823381.html

 

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){}

 

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

高清屏及适配不同设备的方案总结:https://www.cnblogs.com/sese/p/5977486.html

 

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';(默认微软雅黑,如果没有微软雅黑再用其它的字体,电脑端也是一样)

 

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

大神的解释:https://www.zhangxinxu.com/wordpress/2015/05/css3-transform-affect/

 

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; }

 

  1. 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;

 

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

 

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


原文链接:https://www.cnblogs.com/shineipangtuo/p/10277149.html
如有疑问请与原作者联系

标签:

版权申明:本站文章部分自网络,如有侵权,请联系:west999com@outlook.com
特别注意:本站所有转载文章言论不代表本站观点,本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有

上一篇:初学HTML-1

下一篇:【代码笔记】Web-CSS-CSS Fonts(字体)