流式布局的主要特點是 寬度 width 全部用百分比表示
也就是用百分比來進行模組的劃分
因為移動端的物理畫素比一般不是1:1,而正常大小的如果不經過二倍化處理的話,就會被放大失真,模糊
所以拿到手裡的一般是要大一倍
普通:background-size:x,y;這裡的x一般是原圖的一半,y不寫或寫auto,讓成比例縮放(因為到了移動端會自動放大)
精靈圖:background:url() no-repeat x y;
background-size:a b;
精靈圖需要不斷調整background-position,但因為物理畫素比的問題,要先縮放才能用,所以此時的座標應該是縮放後的座標
設定寬度,設定最小寬度、最大寬度、背景色、字型大小、字型、字型顏色、行高、盒子居中、隱藏水平滾動條、取消點選高亮
width:100%;
min-width:320px;
max-width:640px;
background-color:#f2f2f2;
font:normal 14px/1.5 "microsoft yahei";
color:#000;
margin:0 auto;
overflow-x:hidden;。
-webkit-tap-highlight-color:transparent;
img,
a input
ul img
通常會用到浮動,記得給父盒子加overflow:hidden;
搜尋框的內容基本上是有乙個空白的盒子區填充東西的,比如圖示、豎線、輸入框、按鈕
而在流式布局中的搜尋框盒子,左右兩邊的圖示或按鈕或文字用絕對定位固定,而搜尋框則用margin來把左右的距離空出來
而搜尋框的大盒子設定最大、最小寬度,防止視窗縮小把搜尋框擠沒
給父盒子設定圓角,但是沒有寫,此時不必給再寫圓角,給父盒子寫overflow:hidden;把超出父盒子的部分清掉就可以
css3的屬性,可以不必計算盒子的邊框、內外邊距來得到真正的盒子大小,當你怕加了邊框後導致盒子放不下,可以使用該屬性
要善用公式的寫法來操作某些元素
/* 固定定位的盒子必須有寬度 */
/* 固定定位與父級無關,以螢幕為準 */
/* 有定位就沒法用margin */
/* css3的盒子,內容加上邊框才是height,而行高等於內容空白區高度才能垂直居中,所以要減去上下邊框的寬度 */
/* 通過改變主軸來讓兩個盒子垂直排列 */
/* 沒有換行就用items,有換行就用content */
/* 盒子裡同時又flex:1;和display:flex;不會衝突 */
/* 彈性布局加邊框不會把盒子擠下去 */
/* 子盒子flex可以寫百分比,相對於父級來說的 */
移動端布局(1)
移動端和pc端開發差異比較大的就是螢幕了,這裡說的差異主要體現在移動端大螢幕碎片化,各種尺寸和各種解析度的機型非常多,所以,移動端需要解決的問題就是如何去適配各種螢幕尺寸,後面我們有單獨章節來講如何適配,在這裡需要先科普一些基礎知識 1.什麼是螢幕尺寸?螢幕的尺寸指的是對角線的長度,單位一般用英吋 ...
1 移動端事件大綱
1.touchstart 2.touchend 3.touchmove 1.取消預設事件 2.阻止冒泡 3.防止文字選中和阻止預設選單 4.滑鼠事件延遲 5.事件點透問題 1.touches 2.changedtouches 3.targettouches 1.拖拽原理分析 2.滑屏幻燈片簡版 1....
移動端1畫素邊框
通常我們會有偽類和定位來解決1畫素的問題,但是使用偽類也是有問題的,但是你可以換一種方式實現1畫素邊框的問題,box shadow 1.實現下邊框 box shadow inset 0 1px 0 0 000 2.實現右邊框 box shadow inset 1px 0 0 0 000 3.實現左邊...