移動端學習(1)

2022-06-11 14:00:13 字數 1573 閱讀 2745

流式布局的主要特點是 寬度 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.實現左邊...