1.新增meta，使得網頁在手機端能正常瀏覽
html **
對於只需要適配少部分手機裝置，且解析度對頁面影響不大的，使用px即可；
如果需要高精度還原，適配各種手機，最好還是使用rem吧夥計們
1）使用px布局，寬度可使用百分比伸縮，高度使用固定畫素
html **
40%60%
輔助一，使用@media，根據螢幕大小自動調整
可以看看這篇文章詳細介紹《css3的rem設定字型大小》
輔助二，使用js動態計算，這個簡直好用的不得了，簡直完美還原設計稿
html **
100% 7.2rem 設計圖尺寸720，1rem=100px
50% 3.6rem
3.頁面樣式重置，這個在pc端還是移動端都會用到的
css **
/*css初始化*/
body,ol,ul,h1,h2,h3,h4,h5,h6,p,th,td,dl,dd,form,fieldset,legend,input,textarea,select
body
a,a:hover
em,i
li img
table
p input,textarea
* /*使用border-box盒模型使得計算位置、大小更方便*/
這個是我在檢視一些ui框架發現的東西，整個頁面分三塊不超過一屏，header、contaner、footer。
內容都放在container中，超過就overflow-y:scroll;
這個其實挺好用的，使得頁面結構清晰，布局容易
html **
頭部頁尾
內容
內容
內容
html **
2222222222222
1111111111111111111111111111111111111111111111
222222222222222
這個對我這個英語詞彙量不大的來說，簡直是福音啊，
以前寫css老是怕重名，寫的各種奇怪命名，效率還低，
自從有了這個媽媽再也不用擔心《如何寫出優雅的css**》
7.一畫素的問題
在高分屏上寫乙個畫素邊框，那顯示的活脫脫的就是兩個畫素，
設計師不滿意，老闆不滿意；
我們可以用偽元素和css3來解決
css **
.item
.item:after
mobile 移動端布局技巧
去掉a標籤或按鈕按下的高亮顏色 webkit tap highlight color rgba 0,0,0,0 文字處理 是否選中文字 user select none 處理文字超出容器 出現省略號 單行文字超出 出現省略號 text overflow ellipsis overflow hidde...
移動端布局
預設以寬度為640px的設計稿為基準頁面，然後通過js獲取當前顯示裝置的尺寸，對應的調整 html 標籤的font size大小，從而實現通過以rem為單位的移動端布局適配。function win,doc function layoutcalc html.style.fontsize rem px...
移動端布局
css畫素與裝置畫素 二者的區別在於前者是抽象的，用於瀏覽器渲染頁面，而後者是裝置的最小物理單位。可參考 a pixel is not a pixel is not a pixel 進行理解。視口 移動端瀏覽器有兩個視口，即可見視口與布局視口，二者的區別在於前者為基於移動裝置螢幕的實際寬度，而後者為...