前端開發問題解決
前言
最近在做專案，主要做的是網頁手機端適配問題，主要寫一寫遇到的問題以及解決方法，方法可能不是最好的，但是確實是解決了我自己的一些開發問題，持續更新……
問題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();的時候要注意一些版式問題，比如前后左右的間距會需要調整之類的，
轉載請註明出處，本文鏈接：https://www.uj5u.com/qita/181153.html
標籤：其他
上一篇：購物車的實作（三）