成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

移動端網(wǎng)站開發(fā)前端學習總結

番茄西紅柿 / 1750人閱讀

摘要：關于適配宋體移動端適配可以使用宋體宋體也可配合百分比寬度一起使用宋體宋體十分適用于適配默認為以為單位。

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邊框過粗問題（還沒發(fā)現(xiàn)簡單可靠的方案）

現(xiàn)在大部分手機的分辨率很高，一個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設置（）

 

viewport也可作為寬度單位，一些參數(shù)設定，width viewport 寬度(數(shù)值/device-width)，height viewport 高度(數(shù)值/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對布局產(chǎn)生影響時（border會導致容器所占面積變大），可用屬性box-sizing:border-box解決（border在元素內(nèi)部了，不會在外面占空間）

 

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. 父元素如果有旋轉(zhuǎn)屬性或者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規(guī)定如何對齊行文本進行對齊和分隔，對于長文本行內(nèi)整齊效果好

注意（多行使用時當文字兩端占滿整行寬度時才有效.）

 

18.阻止旋轉(zhuǎn)屏幕時自動調(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布局兼容性問題(移動端兼容性較為良好)

Android ;2.3 開始就支持舊版本 display:-webkit-box;4.4 開始支持標準版本 display: flex;

IOS： 6.1 開始支持舊版本 display:-webkit-box;，7.1 開始支持標準版本display: flex;

 

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

 

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

文章版權歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/1313.html

相關文章

  • 移動端布局與適配

    摘要：實戰(zhàn)之微信錢包騰訊服務界面網(wǎng)格布局是讓開發(fā)人員設計一個網(wǎng)格并將內(nèi)容放在這些網(wǎng)格內(nèi)。對于移動端適配，不同的公司不同的團隊有不同的解決方案。柵格系統(tǒng)用于處理頁面多終端適配的問題。 grid實戰(zhàn)之微信錢包 騰訊服務界面 CSS3網(wǎng)格布局是讓開發(fā)人員設計一個網(wǎng)格并將內(nèi)容放在這些網(wǎng)格內(nèi)。而不是使用浮動制作一個網(wǎng)格，實際上是你將一個元素聲明為一個網(wǎng)格容器，并把元素內(nèi)容置于網(wǎng)格中。 移動端頁面適配—...

    Clect 評論0 收藏0

  • 前端資源系列（4）-前端學習資源分享&前端面試資源匯總

    摘要：特意對前端學習資源做一個匯總，方便自己學習查閱參考，和好友們共同進步。 特意對前端學習資源做一個匯總，方便自己學習查閱參考，和好友們共同進步。 本以為自己收藏的站點多，可以很快搞定，沒想到一入?yún)R總深似海。還有很多不足&遺漏的地方，歡迎補充。有錯誤的地方，還請斧正... 托管: welcome to git，歡迎交流，感謝star 有好友反應和斧正，會及時更新，平時業(yè)務工作時也會不定期更...

    princekin 評論0 收藏0

  • HTML-CSS

    摘要：但是，從字體上來說雪碧圖制作，使用以及相關，圖文。由于采用了編譯，所以能夠保證在瀏覽器不支持標準布局的情況下，回滾到舊版本的，保證移動設備中能呈現(xiàn)出一樣的布局效果。我不想陷入和的紛爭，但是有一件事是確定的極大的提升了移動端 一勞永逸的搞定 flex 布局 尋根溯源話布局 一切都始于這樣一個問題：怎樣通過 CSS 簡單而優(yōu)雅的實現(xiàn)水平、垂直同時居中。記得剛開始學習 CSS 的時候，看到 ...

    xiaokai 評論0 收藏0

  • HTML-CSS

    摘要：但是，從字體上來說雪碧圖制作，使用以及相關，圖文。由于采用了編譯，所以能夠保證在瀏覽器不支持標準布局的情況下，回滾到舊版本的，保證移動設備中能呈現(xiàn)出一樣的布局效果。我不想陷入和的紛爭，但是有一件事是確定的極大的提升了移動端 一勞永逸的搞定 flex 布局 尋根溯源話布局 一切都始于這樣一個問題：怎樣通過 CSS 簡單而優(yōu)雅的實現(xiàn)水平、垂直同時居中。記得剛開始學習 CSS 的時候，看到 ...

    CHENGKANG 評論0 收藏0

  • 個人分享--web前端學習資源分享

    摘要：前言月份開始出沒社區(qū)，現(xiàn)在差不多月了，按照工作的說法，就是差不多過了三個月的試用期，準備轉(zhuǎn)正了一般來說，差不多到了轉(zhuǎn)正的時候，會進行總結或者分享會議那么今天我就把看過的一些學習資源主要是博客，博文推薦分享給大家。 1.前言 6月份開始出沒社區(qū)，現(xiàn)在差不多9月了，按照工作的說法，就是差不多過了三個月的試用期，準備轉(zhuǎn)正了！一般來說，差不多到了轉(zhuǎn)正的時候，會進行總結或者分享會議！那么今天我就...

    sherlock221 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<