部分前端开发问题解决

前端开发问题解决

前言

最近在做项目，主要做的是网页手机端适配问题，主要写一写遇到的问题以及解决方法，方法可能不是最好的，但是确实是解决了我自己的一些开发问题。持续更新……

问题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();的时候要注意一些版式问题，比如前后左右的间距会需要调整之类的。