前端開發問題解決

前言

最近在(zài)做項目，主要(yào / yāo)做的(de)是(shì)網頁手機端适配問題，主要(yào / yāo)寫一寫遇到(dào)的(de)問題以(yǐ)及解決方法，方法可能不(bù)是(shì)最好的(de)，但是(shì)确實是(shì)解決了(le／liǎo)我自己的(de)一些開發問題。持續更新……

問題1

在(zài)做手機端适配的(de)html的(de)時(shí)候主要(yào / yāo)碰到(dào)的(de)問題就(jiù)是(shì)手機的(de)大(dà)小比電腦屏幕小很多，所以(yǐ)有很多地(dì / de)方需要(yào / yāo)做修改，比如導航欄，可能在(zài)電腦上(shàng)可以(yǐ)在(zài)一行内顯示，但是(shì)到(dào)了(le／liǎo)手機端，由于(yú)手機寬度不(bù)足，會導緻一行内不(bù)夠放置，就(jiù)會出(chū)現以(yǐ)下情況（如圖）

html部分

<div >
            <div class="nav">首頁</div>
            <div class="nav">走近XX</div>
            <div class="nav">産品介紹</div>
            <div class="nav">新聞中心</div>
            <div class="nav">人(rén)力資源</div>
            <div class="nav">産品中心</div>
            <div class="nav">聯系我們</div>
    </div>

css部分

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

但是(shì)我們知道(dào)一般的(de)手機端頁面即使是(shì)超出(chū)了(le／liǎo)也(yě)不(bù)會換行，而(ér)是(shì)将超出(chū)的(de)部分隐藏，但是(shì)拖動後可以(yǐ)實現出(chū)現。

解決方法
參考以(yǐ)下代碼
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">人(rén)力資源</div>
            <div class="box1">産品中心</div>
            <div class="box1">聯系我們</div>
</div>

css部分

.box {
    padding: 10px 0;
    white-space: nowrap;
    /*文本不(bù)會換行，文本會在(zài)在(zài)同一行上(shàng)繼續*/
    overflow-y: auto;
    /*可滑動*/
}
.box1 {
/* rem是(shì)一種像素單位，作用和(hé / huò)px差不(bù)多，rem在(zài)手機端用的(de)比較多 */
    width: 5rem;
    margin-left: 0.5rem;
    display: inline-block;
    text-align: center;
    border-bottom: 10rem;
    /*行内塊元素*/
}

解決後效果如圖

問題2

在(zài)做手機端字體的(de)時(shí)候有時(shí)候會需要(yào / yāo)比較小的(de)字體，但是(shì)在(zài)用chrome浏覽器會發現浏覽器支持最小的(de)字體是(shì)12px，所以(yǐ)即使你設置字體大(dà)小爲(wéi / wèi)5px顯示出(chū)來(lái)的(de)還是(shì)12px大(dà)小的(de)字體。
解決方法
在(zài)字體樣式文件裏加入如下語句transform: scale(0.8);裏面的(de)小數部分可以(yǐ)自己修改，就(jiù)是(shì)縮小倍數。但是(shì)用此方法會發現，其實這(zhè)個(gè)方法并不(bù)是(shì)縮小字體，而(ér)是(shì)把整個(gè)div縮小了(le／liǎo)，如圖所示下面的(de)是(shì)加了(le／liǎo)transform: scale(0.5);後的(de)div的(de)效果

所以(yǐ)在(zài)使用transform: scale();的(de)時(shí)候要(yào / yāo)注意一些版式問題，比如前後左右的(de)間距會需要(yào / yāo)調整之(zhī)類的(de)。