1:固定布局採用固定畫素 原理:設定好視口,跟pc端寫法一樣 版心320px 即可
優點：思路沿用pc端，上手簡單。
缺點: 介面左右兩側有空白 而且元素略小 使用者體驗差
2:流式布局原理:採用%替代固定px 限制布局盒子的最大寬度和最小寬度
優點:實現自適應
缺點: 只做寬度適配,高度會被拉伸
3:rem布局原理:設定根標籤html的字型大小,利用**查詢換算不同螢幕寬度下對應的字型大小 利用相對單位rem取代固定px
優點: 寬高字型大小都能自適應 顯示效果好
4:**查詢布局原理:利用**查詢查詢不同的螢幕寬度 給每個不同裝置都寫一套樣式檔案
缺點:複雜 工作量大 後期難維護
設定根標籤html的字型大小,利用**查詢換算不同螢幕寬度下對應的字型大小 利用相對單位rem取代固定px
優點: 盒子寬高大小都能自適應 ,可以達到自適應的需求
缺點:字型大小如果也設定rem單位的話會出現字型變化呈現線性的變大變小 ,其實字型的變化應該是非線性的取值 所以字型需要單獨利用**查詢設定
1，固定布局
在head裡吧viewport加好，跟pc端一樣，設想整個網頁寬度為320px居中即可，超出部分留白
優：思路沿用pc端，上手簡單
缺：大屏手機手機橫屏時，兩邊留白較大，而且大屏手機看起來頁面會特別小，操作按鈕也很小，使用者體驗差
2，流式布局
使用百分比來代替傳統的px，但高度用培訓固定，顯示效果會感覺被拉長，高度沒變
優：很好解決自適應需求
缺：通過大量百分比布局，會出現相容性問題，且更適用於對橫向拉伸的設計元素，存在侷限性
3，響應式做法
根據使用者的訪問裝置的主要型別做三四種布局
每種布局有乙個區間可利用**查詢，可以為不同解析度的裝置載入不同的樣式
優：相對精確的控制顯示效果
缺：對同一類書寫不同的樣式導致**比較繁複，後期維護困難
4，rem布局
設定根標籤html的字型大小,利用**查詢換算不同螢幕寬度下對應的字型大小 利用相對單位rem取代固定px
①、單行文字溢位顯示省略號(…)
text-overflow:elli[ps] is屬性來實現單行文字的溢位顯示省略號(…)。當然部分瀏覽器還需要加寬度width屬性。
p
設定相對定位的容器高度（高度必須是行高的整數倍），用包含省略號(…)的偽元素元素通過絕對定位模擬實現
p
移動端常見問題
1 ios下input為type button屬性disabled設定true,會出現樣式文字和背景異常問題 解決方案 使用opacity 1來解決 2 對非可點選元素如 label,span 監聽click事件，部分ios版本下不會觸發 解決方案 css增加cursor pointer就搞定了 3...
移動端常見問題
1 上下拉動滾動條時卡頓 慢 body 2 禁止複製 選中文字 element 解決移動裝置可選中頁面文字 視產品需要而定 3 長時間按住頁面出現閃退 element 4 iphone及ipad下輸入框缺省內陰影 5 ios和android下觸控元素時出現半透明灰色遮罩 6 active相容處理 7...
移動端常見問題
一.點選穿透 原因 1.touch事件300ms後，觸發click事件 2.混用touch和click會導致點透問題。解決思路 1.不要混用touch和click 2.阻止掉 touch之後的click。解決方案 1.tap後延遲350ms再隱藏mask 2.pointer events mask隱...