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

Posted 2021-02-03 shineipangtuo

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)。

 

关于meta：http://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 range和select）， 了解webkit对标签或input控件的渲染效果，内部的标签要活用不要只用div减少识别性和快捷性，关于文件放置相同功能模块的网页和css放在一个文件夹下面，index，login等跳转功能较多或模块的主体页面放在最外层，要写各种机型的兼容HTC、三星等（腾讯gituht上有）