前端開發(fā)問題解決

前言

最近在做項(xiàng)目，主要做的是網(wǎng)頁手機(jī)端適配問題，主要寫一寫遇到的問題以及解決方法，方法可能不是最好的，但是確實(shí)是解決了我自己的一些開發(fā)問題。持續(xù)更新……

問題1

在做手機(jī)端適配的html的時(shí)候主要碰到的問題就是手機(jī)的大小比電腦屏幕小很多，所以有很多地方需要做修改，比如導(dǎo)航欄，可能在電腦上可以在一行內(nèi)顯示，但是到了手機(jī)端，由于手機(jī)寬度不足，會(huì)導(dǎo)致一行內(nèi)不夠放置，就會(huì)出現(xiàn)以下情況（如圖）

html部分

<div >
            <div class="nav">首頁</div>
            <div class="nav">走近XX</div>
            <div class="nav">產(chǎn)品介紹</div>
            <div class="nav">新聞中心</div>
            <div class="nav">人力資源</div>
            <div class="nav">產(chǎn)品中心</div>
            <div class="nav">聯(lián)系我們</div>
    </div>

css部分

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

但是我們知道一般的手機(jī)端頁面即使是超出了也不會(huì)換行，而是將超出的部分隱藏，但是拖動(dòng)后可以實(shí)現(xiàn)出現(xiàn)。

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

<div class="box">
            <div class="box1 current">首頁</div>
            <div class="box1">走近XX</div>
            <div class="box1">產(chǎn)品介紹</div>
            <div class="box1">新聞中心</div>
            <div class="box1">人力資源</div>
            <div class="box1">產(chǎn)品中心</div>
            <div class="box1">聯(lián)系我們</div>
</div>

css部分

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

解決后效果如圖

問題2

在做手機(jī)端字體的時(shí)候有時(shí)候會(huì)需要比較小的字體，但是在用chrome瀏覽器會(huì)發(fā)現(xiàn)瀏覽器支持最小的字體是12px，所以即使你設(shè)置字體大小為5px顯示出來的還是12px大小的字體。
解決方法
在字體樣式文件里加入如下語句transform: scale(0.8);里面的小數(shù)部分可以自己修改，就是縮小倍數(shù)。但是用此方法會(huì)發(fā)現(xiàn)，其實(shí)這個(gè)方法并不是縮小字體，而是把整個(gè)div縮小了，如圖所示下面的是加了transform: scale(0.5);后的div的效果

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