前端開(kāi)發問(wèn)題解決

前言

最近(jìn)在做(zuò)項目，主要(yào)做(zuò)的(de)是(s©∑hì)網頁手機(jī)端适配問(wèn)題，主要(yào)寫一(yī&φ)寫遇到(dào)的(de)問(wèn)題以及解決方法，方法可(kě)能(nén₽ £♥g)不(bù)是(shì)最好(hǎo)的(de)&∏π₹#xff0c;但(dàn)是(shì)确實是(shì)解決了(₩βle)我自(zì)己的(de)一(yī)些(xiē)開(kāi)發問(wèn)≤∏→題。持續更新……

問(wèn)題1

在做(zuò)手機(jī)端适配的(de)html的(de)時§↑(shí)候主要(yào)碰到(dào)的(de)問(wèn)題就(jiù)是(sh↑©ì)手機(jī)的(de)大(dà)小(xiǎo)比電(diànπγ)腦(nǎo)屏幕小(xiǎo)很(hěn)多(duō)，'₽;所以有(yǒu)很(hěn)多(duō)地(dì)方需要(yào)做(zuò)修改，'★™♦;比如(rú)導航欄，可(kě)能(néng)在電(diàn∑±)腦(nǎo)上(shàng)可(kě)以在一(yī)行(xíng"®↔)內(nèi)顯示，但(dàn)是(shì)到(dào)‌α >了(le)手機(jī)端，由于手機(jī)寬度不(bù)足，Ωλ;會(huì)導緻一(yī)行(xíng)內(nèi)不(bù)夠放(fàn€±¥g)置，就(jiù)會(huì)出現(≈©∞xiàn)以下(xià)情況（如(rú)圖）

html部分(fēn)

<div >
            <div class="nav">首頁</div>
            <div class="nav">走近(jìn)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部分(fēn)

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

但(dàn)是(shì)我們知(zhī)道(dào)一(yī)般的(de)手≈®±↓機(jī)端頁面即使是(shì)超出了(le)也(yě)不(bù)會(huì)換行(x• ¥íng)，而是(shì)将超出的(de)部分(fēn)隐藏，但(dΩ€≠>àn)是(shì)拖動後可(kě)以實現(xiàn)出現(xiàn)。

解決方法
參考以下(xià)代碼
html部分(fēn)

<div class="box">
            <div class="box1 current">首頁</div>
            <div class="box1">走近(jìn)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部分(fēn)

.box {
    padding: 10px 0;
    white-space: nowrap;
    /*文(wén)本不(bù)會(huì)換行(xíng)，文(wén)本會↕​(huì)在在同一(yī)行(xíng)上(shàng)繼續*/
    overflow-y: auto;
    /*可(kě)滑動*/
}
.box1 {
/* rem是(shì)一(yī)種像素單位，作(δ☆σzuò)用(yòng)和(hé)px差不(bù)多(duō)，rem在手機↔≈♠(jī)端用(yòng)的(de)比較多(duō) £‌♥↓*/
    width: 5rem;
    margin-left: 0.5rem;
    display: inline-block;
    text-align: center;
    border-bottom: 10rem;
    /*行(xíng)內(nèi)塊元素*/
}

解決後效果如(rú)圖

問(wèn)題2

在做(zuò)手機(jī)端字體(tǐ)的(de)時(shí)​↔候有(yǒu)時(shí)候會(huì)需要(yào)比較小(xiǎo)ε™&的(de)字體(tǐ)，但(dàn)是(shì☆∞‍)在用(yòng)chrome浏覽器(qì)會(huì)發現(xiàn)浏覽器(qì)≠→‍"支持最小(xiǎo)的(de)字體(tǐ)是(shì)12px，所以即使你(n± ǐ)設置字體(tǐ)大(dà)小(xiǎo)為(wèi)5px顯示出來(lái)的(dαγ©e)還(hái)是(shì)12px大(dà)小(xiǎo£λ)的(de)字體(tǐ)。
解決方法
在字體(tǐ)樣式文(wén)件(jiàn)裡(lǐ)加入如(r∏✘ú)下(xià)語句transform: scale(0.8);裡(lǐ)面的(de)小(xiǎo)數(shù)部分(fēn)可(kě)以自★$£(zì)己修改，就(jiù)是(shì)縮小(xiǎo)倍數(shù)σ<<。但(dàn)是(shì)用(yòng)此方法會(huì)發現(xiàn≠÷♥φ)，其實這(zhè)個(gè)方法并不(φπ><bù)是(shì)縮小(xiǎo)字體(tǐ)，而是(shì)把整個(gè)d"§↕∏iv縮小(xiǎo)了(le)，如(rú)圖所示下(xià✘β​)面的(de)是(shì)加了(le)transform: scale(0.5);後的(de)div的(de)效果

所以在使用(yòng)transform: scale();的(de)時(shí)候要(yào)注意一(yī)些(xiē)版式問€☆'™(wèn)題，比如(rú)前後左右的(de)間(jiān)距會(huì)需要($₹βyào)調整之類的(de)。