部分前端開發問題解決

前端開發問題解決

前言

最近在做專案，主要做的是網頁手機端適配問題，主要寫一寫遇到的問題以及解決方法，方法可能不是最好的，但是確實是解決了我自己的一些開發問題。持續更新……

問題1

在做手機端適配的html的時候主要碰到的問題就是手機的大小比電腦螢幕小很多，所以有很多地方需要做修改，比如導航欄，可能在電腦上可以在一行內顯示，但是到了手機端，由於手機寬度不足，會導致一行內不夠放置，就會出現以下情況（如圖）

html部分

<div >
            <div class="nav">首頁</div>
            <div class="nav">走近XX</div>
            <div class="nav">產品介紹</div>
            <div class="nav">新聞中心</div>
            <div class="nav">人力資源</div>
            <div class="nav">產品中心</div>
            <div class="nav">聯絡我們</div>
    </div>

css部分

.nav{
			height: 100px;
			width: 200px;
			display: inline-block;
		}

但是我們知道一般的手機端頁面即使是超出了也不會換行，而是將超出的部分隱藏，但是拖動後可以實現出現。

解決方法
參考以下程式碼
html部分

<div class="box">
            <div class="box1 current">首頁</div>
            <div class="box1">走近XX</div>
            <div class="box1">產品介紹</div>
            <div class="box1">新聞中心</div>
            <div class="box1">人力資源</div>
            <div class="box1">產品中心</div>
            <div class="box1">聯絡我們</div>
</div>

css部分

.box {
    padding: 10px 0;
    white-space: nowrap;
    /*文字不會換行，文字會在在同一行上繼續*/
    overflow-y: auto;
    /*可滑動*/
}
.box1 {
/* rem是一種畫素單位，作用和px差不多，rem在手機端用的比較多 */
    width: 5rem;
    margin-left: 0.5rem;
    display: inline-block;
    text-align: center;
    border-bottom: 10rem;
    /*行內塊元素*/
}

解決後效果如圖

問題2

在做手機端字型的時候有時候會需要比較小的字型，但是在用chrome瀏覽器會發現瀏覽器支援最小的字型是12px，所以即使你設定字型大小為5px顯示出來的還是12px大小的字型。
解決方法
在字型樣式檔案里加入如下語句transform: scale(0.8);裡面的小數部分可以自己修改，就是縮小倍數。但是用此方法會發現，其實這個方法並不是縮小字型，而是把整個div縮小了，如圖所示下面的是加了transform: scale(0.5);後的div的效果

所以在使用transform: scale();的時候要注意一些版式問題，比如前後左右的間距會需要調整之類的。