移動(dòng)端網(wǎng)站開發(fā)前端學(xué)習(xí)總結(jié)

番茄西紅柿發(fā)布于2019-04-23 11:53 / 1748人閱讀

摘要：關(guān)于適配宋體移動(dòng)端適配可以使用宋體宋體也可配合百分比寬度一起使用宋體宋體十分適用于適配默認(rèn)為以為單位。

1.關(guān)于適配:

移動(dòng)端適配可以使用lib-flexible（也可配合百分比寬度一起使用）十分適用于webapp適配

Font-size默認(rèn)為12px 以rem為單位。

關(guān)于lib-flexible詳解：http://www.w3cplus.com/mobile/lib-flexible-for-html5-layout.html

注意：應(yīng)用lib-flexible與響應(yīng)式布局(媒介查詢應(yīng)用不同的樣式)難以兼容，因?yàn)閘ib-flexible會(huì)改變媒體查詢關(guān)鍵的width屬性使其不準(zhǔn)確參考

lib-flexible的問題研究：https://www.cnblogs.com/lyzg/p/5117324.html

.container設(shè)置max-width: 640px；width: 100%;。應(yīng)用lib-flexible時(shí)也可設(shè)置為固定寬度width:10rem;overflow: hidden;（二者都是將屏幕的width等分出來的單位，顯示效果一般無二）

2.webapp的1px邊框過粗問題（還沒發(fā)現(xiàn)簡單可靠的方案）

現(xiàn)在大部分手機(jī)的分辨率很高，一個(gè)css像素1px，可能相當(dāng)于2個(gè)甚至3個(gè)物理分辨率像素

導(dǎo)致1px會(huì)比實(shí)際的粗（雖然使用lib-flexible，但在在安卓設(shè)備下，此問題依然存在）

解決方法(利用transform達(dá)到零點(diǎn)幾px的效果)：

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

2.input 有placeholder情況下不要設(shè)置行高，否則會(huì)偏上

placeholder屬性會(huì)使文本位置偏上時(shí)解決辦法：line-height: （和input框的高度一樣高）---pc端解決方法 line-height：normal ---移動(dòng)端解決方法

3.為了更好的兼容，會(huì)使用完整的viewport設(shè)置（）

viewport也可作為寬度單位，一些參數(shù)設(shè)定，width viewport 寬度(數(shù)值/device-width)，height viewport 高度(數(shù)值/device-height)，initial-scale 初始縮放比例，user-scalable 是否允許用戶縮放(yes/no)。

關(guān)于meta：http://www.cnblogs.com/libin-1/p/5979300.html

Display:flex;可以達(dá)到很好的布局效果，自適應(yīng)效果不錯(cuò) 注意：定義了flex、align-items等后子元素magain 和 float屬性受影響甚至失效

Flex彈性布局詳解：https://www.cnblogs.com/nuannuan7362/p/5823381.html

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

6.在input框獲得焦點(diǎn)時(shí)文字被清空用value 在input框輸入文字時(shí)被清空用placeholder

7.當(dāng)border對布局產(chǎn)生影響時(shí)（border會(huì)導(dǎo)致容器所占面積變大），可用屬性box-sizing:border-box解決（border在元素內(nèi)部了，不會(huì)在外面占空間）

8.webkit表單元素的默認(rèn)外觀怎么重置

.css{-webkit-appearance:none;}

清除input默認(rèn)樣式

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

9.媒體查詢：給不同屏幕大小的手機(jī)設(shè)置特殊樣式

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

可用于圖片適配查詢devicePixelRatio＝2，采用2x的背景圖（background-size:contain）

高清屏及適配不同設(shè)備的方案總結(jié)：https://www.cnblogs.com/sese/p/5977486.html

11.用aftet偽類和定位可以對盒子達(dá)到特殊的修飾效果

為盒子底部加上一條寬度為96%的邊框

.div:after{

position: absolute;

bottom: 0;

left: 4%;

content: ;

display: block;

height: 1px;

width: 96%;

}

12.input::-webkit-input-placeholder{ color: #******;}//改變提示字體的顏色，不會(huì)改變用戶輸入字的顏色（pc端頁面還要寫兼容性）

13.font-family: Microsoft YaHei,Cabin, Arial, STXihei, 華文細(xì)黑, SimSun, 宋體, Heiti, 黑體, STSong;（默認(rèn)微軟雅黑，如果沒有微軟雅黑再用其它的字體，電腦端也是一樣）

父元素如果有旋轉(zhuǎn)屬性或者scare放大縮小屬性都會(huì)使得pisition:flex失靈變成pisition：absolute的效果

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

15.用p標(biāo)簽與高度相關(guān)時(shí)必需要設(shè)置line-hight(沒有特殊要求時(shí)設(shè)為font-size的值)，因?yàn)閜標(biāo)簽會(huì)默認(rèn)行高為字體大小加上下留的空白高度（默認(rèn)上下留白）

16.去除-webkit-的滾動(dòng)條

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

設(shè)置滾動(dòng)條樣式

/*滾動(dòng)條寬度*/

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

/*滾動(dòng)條滑塊*/

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

/*滾動(dòng)條的整個(gè)背景*/

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

text-align:justify規(guī)定如何對齊行文本進(jìn)行對齊和分隔，對于長文本行內(nèi)整齊效果好

注意（多行使用時(shí)當(dāng)文字兩端占滿整行寬度時(shí)才有效.）

18.阻止旋轉(zhuǎn)屏幕時(shí)自動(dòng)調(diào)整字體大小html, body, form, fieldset, p, div, h1, h2, h3, h4, h5, h6 {-webkit-text-size-adjust:none;}

19.禁止用戶選中文字

-webkit-user-select:none

20.flex布局兼容性問題(移動(dòng)端兼容性較為良好)

Android ;2.3 開始就支持舊版本 display:-webkit-box;4.4 開始支持標(biāo)準(zhǔn)版本 display: flex;

IOS： 6.1 開始支持舊版本 display:-webkit-box;，7.1 開始支持標(biāo)準(zhǔn)版本display: flex;

移動(dòng)端字體小于12px使用四周邊框或者背景色塊，可能出現(xiàn)安卓文字偏上bug問題，可以使用整體放大1倍再縮放scale，而且字體不要是奇數(shù)

不足：改用a標(biāo)簽（有鏈接跳轉(zhuǎn)的地方），像最左、最右、居中此類有特點(diǎn)的位置要保證在任何情況下都能保持特點(diǎn)（比如居中用百分比定位，左右用flex布局屬性、margin-最左用left、或者浮動(dòng)），不要只考慮展示效果（也要為交互便捷考慮比如有兩個(gè)地方應(yīng)用input range和select），了解webkit對標(biāo)簽或input控件的渲染效果，內(nèi)部的標(biāo)簽要活用不要只用div減少識別性和快捷性，關(guān)于文件放置相同功能模塊的網(wǎng)頁和css放在一個(gè)文件夾下面，index，login等跳轉(zhuǎn)功能較多或模塊的主體頁面放在最外層，要寫各種機(jī)型的兼容HTC、三星等（騰訊gituht上有）