第一次寫移動端的心得

2021-06-26 04:37:40 字數 1436 閱讀 1636

寫手機端的總結

剛開始的時候不知道如何下手,尤其糾結於,怎麼自適應,怎麼響應式。雖然現在還是有些模糊,不過至少自己還是有一些了解。

「媒介查詢」這個東西在手機中用的比較多,具體來說,當在不同的視窗大小時,查詢相應的css樣式表。。

這個是我寫東西裡面用的比較多,但是也就知道了這麼多。其實還有很多屬性,有待進一步接觸。

手機端設計的寬度一般是640px,一般我將最外層的div設定為#more

//最大寬度為640px,讓它在瀏覽器居中顯示

字型的話要會用相對的字型(瀏覽器一般預設16px),這時1em=16px。要學會用相對單位。。

寬度不用想了都是用百分比的(百分比是怎嗎算的呢,要時刻關注你要設定的那個元素的父元素,根據父級來設定百分比)

自然也要設定為彈性(別被這個嚇唬住,之前我也不明白,別人說的也不清楚)

img 這個就夠了。。意思是按照它最大的寬度設定,這時候,視窗縮小就會縮小,

不過位置可能不是你想要的,這個時候我們就要找到相應的視窗介面樣式裡設定樣式。。

為了適應不同大小的視窗介面 我們還要這麼設定:(就是我上面說的,當在不同的視窗大小時,寫相應的css樣式表。)

@media screen and (min-width:321px) and (max-width:480px){}

//這個是說在螢幕介於321px和480px設定的樣式

@media screen and (max-width:320px){}

//在最大為320px 的螢幕上設定的樣式

剛開始我弄不明白怎麼在手機上測試呢?如何寫樣式呢?

其實我就是先把谷歌瀏覽器完全開啟,在裡面設定我們pc端的樣式(視窗最大狀態)。設定好pc端的以後,

然後把瀏覽器放到小,這不是縮放(ctrl+滑鼠滾動)啊,是把整個瀏覽器視窗放小。

接著我們在裡面設定樣式,這個時候我們不必去調正之前的樣式表(這個很重要)。

而是在螢幕介於321px和480px設定樣式或者在最大為320px 的螢幕上設定樣式。

經過自己寫的,我個人覺得,主要還是css樣式比較重要,至於本人目前也只是單單的寫一些簡單的js原生的。

不是不喜歡用jq,而是原生的更能深入。。(瀏覽器相容性那是不用說的了,jq很強大)

/*清除浮動*/

.clearfix:after

.clearfix

這個用的還是比較方便的,之前用的清楚浮動是

後期維護可能還有很多東西需要去做,到時只能是改動了

遇到的問題:

1:多行文字溢位出現省略號的問題

text-overflow:ellipsis;//這個屬性設定文字溢位

display:-webkit-box;

-webkit-line-clamp:3;//設定超過多少行開始溢位成省略號

-webkit-box-orient:vertical;

overflow:hidden//溢位隱藏

第一次寫部落格

今天是我第一次寫自己的部落格 感到很激動 我是乙個程式設計師 之前一直看一些關於如何學習程式語言的貼子 大家都說學習一門語言 在於積累 而積累不能都考腦子儲存起來 需要整理成乙個自己的小金庫 在這個小金庫中有我在工作開發中遇到的乙個乙個的問題 我們往往對於新的問題要花費相對較長的時間去解決,對於我 ...

第一次寫部落格

這是我第一次寫部落格,也不知道到底該寫點什麼,感覺很多需要寫,但還是不那麼的自信,不論怎麼樣,還是希望能夠記錄一下自己作為一名程式猿這點點滴滴的事情,算是一段經歷吧。希望看到的人不要噴我。我是菜鳥,菜的不能再菜的鳥。大神就不要來嘲笑小弟了。剛開始寫程式還是跟著一群有志向大四的學長。可能就是這一點點的...

第一次寫部落格

第一篇文章 前兩天看見同學的朋友圈,很高興自己大學三年寫的部落格還是有人看的嗎。大學三年看過很多別人的很寫的部落格,也借鑑了很多人分享的資源。曾經很多次想過要開乙個自己的部落格,寫寫文章,寫寫 記錄一下平時學習中遇到的問題,可是每次都不了了之。ps 本人比較懶哈 國慶之後就要去深圳公司實習了,今天做...