为什么网页不能适配所有屏幕

lzn970721

求助各位大佬想做一个能适配所有屏幕的页面，想要的效果就是在不同大小的屏幕下布局保持一致，只是大小缩放 ，其它元素我知道，可以通过%设置宽度来适配，但是文字大小却不能自动适配，上网查了一下，说不用px用rem单位就可以了，但是好像没什么效果  代码及图片如下（大屏幕效果截图被缩小了）  顺便问一下 宽度可以设置% 高度怎么%（就是想让元素的纵横比一致）网上说可以padding-bottom:xx%; 但是这样高度是0 有些设置就失效了

CSS代码

[CSS] 纯文本查看 复制代码

.mid-left{
        width:25%;
        border-left:1px solid #cccccc;
        border-bottom:1px solid #cccccc;
}
.mid-left>div:first-child {
        width:100%;
        height:100px;
        padding-top:20px;
        padding-left:40px;
}
.mid-left>div:first-child img{
        float:left;
        width:25%;
}
.mid-left>div:first-child ul{
        font-size:1.6rem;
        width:75%;
        float:right;
        padding-top:10px;
        padding-left:20px;
        letter-spacing: 1px;
}
#user{
        color:#ff774d;
}
.mid-left>div:nth-child(2){
        height:40px;
        line-height: 40px;
        padding:0 10px;
        text-align: center;
        font-size:1.6rem;
}
.mid-left>div:nth-child(2) div{
        width:33%;
}
.mid-left>div:nth-child(2) div:nth-child(2){
        border-left:1px solid #cccccc;
        border-right:1px solid #cccccc;
}
.mid-left>div:last-child {
        height:60px;
        line-height: 60px;
        text-align: center;
        font-size:1.4rem;
        padding:0 10px;
}
.mid-left>div:last-child div{
        width:33%;
}
.mid-left>div:last-child div span{
        color:#ff774d;
        border-right:3px solid #ff774d;
        padding:0 5px;
}

HTML代码

[HTML] 纯文本查看 复制代码

<div class="pull-left mid-left">
                                        <div>
                                                <img alt="x" src="../../images/ren_07.png">
                                                <ul>
                                                        <li><span id="user">Hi</span><span>，早上好！</span></li>
                                                        <li><span>欢迎来到XX网！</span></li>
                                                </ul>
                                        </div>
                                        <div>
                                                <div class="pull-left"><img alt="x" src="../../images/renn_14.png"><a>登录</a></div>
                                                <div class="pull-left"><img alt="x" src="../../images/suo_16.png"><a>注册</a></div>
                                                <div class="pull-left"><img alt="x" src="../../images/yaoshi_11.png"><a>忘记密码</a></div>
                                        </div>
                                        <div>
                                                <div class="pull-left"><span>采购商</span></div>
                                                <div class="pull-left"><a>供应商</a></div>
                                                <div class="pull-left"><a>帮助中心</a></div>
                                        </div>
                                </div>

class=“pull-left” 是bootstrap的快速浮动 根元素的字体大小设置的50%（根据我的测试是10px）不知道问什么这块的文字不是按比例缩小 而是窜下去了 有些地方的文字就缩小了 同样是1.6rem
请求大佬解惑 （可能代码有点乱）

我发现 vw 和 vh 是好东西 用这两个单位做倒是不错

itohok

bootstrap自带不是有现成的？你不再次设置文字大小了，显示不下的地方，你可以用@media通来调取不同的css样式单独设置大小，具体怎么用@media，你百度一下就好，网上的教程多的是还专业，就不在这里叨叨了

孤鸟的歌917

栅格系统

lzn970721

孤鸟的歌917 发表于 2019-10-10 20:45
栅格系统

但是栅格系统文字不会缩放  我想要的效果就是整个页面是等比例缩放的 比如在小的屏幕看就是比大的屏幕小一号 先不考虑手机和平板 就想先可以适应不同大小的电脑屏幕

lzn970721

或者哪位大佬能告诉我一般网站是怎么做到适应所有尺寸的电脑屏幕而布局不会乱

lzn970721

itohok 发表于 2019-10-10 20:44
bootstrap自带不是有现成的？你不再次设置文字大小了，显示不下的地方，你可以用@media通来调取不同的css样 ...

意思是通过@media设置不同屏幕下根元素的字体大小 rem才能看出效果吗

水蛙族的巨星

我记得可以auto   然后各个板块设置百分比？？？忘了- -  大佬勿喷

潇未然

肯定不是按照屏幕百分比，而是你这个个人栏的百分比，就是在百分比框架里再进行百分比

无知故无畏

感谢分享

lzn970721

潇未然 发表于 2019-10-10 21:31
肯定不是按照屏幕百分比，而是你这个个人栏的百分比，就是在百分比框架里再进行百分比

但是我每一层都是按照百分比设置的宽度呀 起码横向的布局不会乱 但是这个字的字号没随着变小 就窜了