2020-12-14兼容屏幕分辨率的几种布局方式

最新推荐文章于 2024-05-02 14:00:02 发布

爱学习的ljz

最新推荐文章于 2024-05-02 14:00:02 发布

阅读量582

点赞数

分类专栏：前端文章标签： css html

本文链接：https://blog.csdn.net/qq_40600414/article/details/111187099

版权

屏幕适配百分比布局 Flexbox 响应式设计 CSS布局

关键词由CSDN通过智能技术生成

前端专栏收录该内容

29 篇文章 0 订阅

订阅专栏

兼容屏幕分辨率的几种布局方式

开发很多的项目是针对于不同的屏幕都要兼容的，一般是19201080，最低有时候需要支持到1024768，因此需要在布局上有一些适应屏幕的方式。有多中方式。

1 最基本的是所有都卡死px，这样的话，当屏幕过小时，会出现滚动条，可以拖动显示。

全都使用px的方式，不会受到屏幕的影响，当屏幕过小时可以拖动滚动条显示，但是效果很不好，有时候想在页面上看一个内容，还需要拖动滚动条才可以看完整，因此这种方式不推荐使用。

2 可以考虑百分比，一般为了用户体验感，滚动条是不会添加的，所以可以利用百分比来控制页面各个模块的展示。实现如下效果。

界面从垂直方向来说是一个固比模型，上面的header部分是属于固定高度的下方是取剩下的所有高度，上面取固定高度是为了方便展示某些固定长宽的图片等元素，使用了rem也可以根据浏览器宽度的减小适当减小。

主要分为container div，需要宽度和高度都填满页面，所以设置html，body，.container 这三个元素的宽和高都为100%，然后设置一下margin和padding为0 上方header部分和下方container_body两部分，然后上方定死 2rem，下方的高度利用calc ：100% - 2rem 来实现。

header里分为4个item块，每个宽度占25%，高度占100%，在宽度设置25%的时候主要需要在父元素标签里设置font-size为0 ，因为在写html标签时，便签与标签之前有空格，浏览器会编译成一个空格文本，所以除非不留空格，或者将font-size设为0，这样就可以四个元素各占25% ，挤在一行了。如果需要添加border，border的宽度可能会影响原本各占25%宽度的item在一行显示不开，需要加上box-sizing: border-box;

下方container_body部分分为左右两部分，左侧宽度占比75%，右侧占25%，如果设置了display为inline-block之后两个元素还是不在一行，原因则与上方header中一样，需要设置父元素标签的font-size为0。

需要引入jquery将css样式设置可以使用rem，根据屏幕宽度来变化。

在这里插入图片描述
源码如下

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <title>兼容分辨率布局1</title>

   <script src="../js/jquery-3.3.1.min.js"></script>
   <style>
       html,body,.container{
           width: 100%;
           height: 100%;
           margin: 0;
           padding: 0;
       }
       .header{
           height: 2rem;
           background-color: #8cc5ff;
           font-size: 0px;
       }
       .header .top_item{
           display: inline-block;
           height: 2rem;
           width: 25%;
           font-size: 18px;
           background-color: #c2e7b0;
       }
       .header .top_item:nth-child(2n+1){
           background-color: #e0e0e0;
       }
       .container_body{
           width: 100%;
           background-color: #c0ccda;
           height: calc(100% - 2rem);
           font-size: 0;
       }
       .container_body .body-left{
           display: inline-block;
           width: 75%;
           background-color: yellow;
           height: 100%;
           font-size: 18px;
       }
       .container_body .body-right{
           display: inline-block;
           width: 25%;
           background-color: #9F9F9F;
           height: 100%;
           font-size: 18px;
       }
   </style>
</head>

<script>
   function autoWH() {
       var bili = 100/1920;
       var wH = window.innerHeight;
       var wW = window.innerWidth;
       var rem = wW*bili;
       $('html').css('font-size',rem+"px");
   }
   $(window).on('resize', function() {
       // 设置Iframe窗口大小
       autoWH();
   }).resize();
   autoWH();

</script>
<body>
   <div class="container" >
       <div class="header" >
           <div class="top_item" >item1</div>
           <div class="top_item" >item2</div>
           <div class="top_item" >item3</div>
           <div class="top_item" >item4</div>
       </div>
       <div class="container_body" >
           <div  class="body-left" >
               body-left
           </div>
           <div  class="body-right" >
               body-right
           </div>
       </div>
   </div>
</body>
</html>

3 第三种是使用弹性盒子，flex布局。

弹性盒子有时候可以很好的解决兼容屏幕分辨率的问题，他是将容器当做一个盒子，盒子有主轴和侧轴，首先会在主轴方向去挤压盒子，默认主轴方向是水平方向（flex-direction: row;）我的理解就是row是行的意思，默认是想让所有的元素在一行里排列显示，所以沿着水平方向一行展示，也可以设置为为主轴方向是垂直方向（flex-direction: column;），这个意思就是让元素在一列显示。从上向下排成一列。

如果想让多行展示元素,可以设置flex-wraper:wraper ; 想实现主轴居中对齐,使用justify-content: center; 想设置侧轴方向居中对齐就设置 align-content: center ;

flex的机制就是在主轴方向分配长度时先将固定长度的元素减掉,再将剩下的长度按照flex的比例来进行分配长度.以此来实现固比模型.

下面是布局效果,仅仅是为了展示布局,并未考虑美化.

在这里插入图片描述
以下是flex布局实现的源码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>兼容分辨率布局2弹性盒子</title>
    <script src="../js/jquery-3.3.1.min.js"></script>
    <style>
        html,body,.container{width: 100%;height: 100%;margin: 0;padding: 0;}
        .container{display: flex;flex-direction: column;}
        .container .header{height: 2rem;background-color: #c2e7b0;display: flex;}
        .header .top_item{width: 25%;border: 1px solid darkgray;}
        .header .top_item:nth-child(2n+1){background-color: #e0e0e0;}
        .container .container_body{flex: 1;background-color: #c6e2ff;display: flex;font-size: 20px;}
        .container_body .body-left{display: inline-block;width: 2rem;background-color: #00ff00;}
        .container_body .body-center{display: inline-block;flex: 3;background-color: #93D1FF;}
        .container_body .body-right{display: inline-block;flex: 1;}
        .body-center .body-list{width: 80%;margin: 0 auto;display: flex;justify-content: center;align-content: center;flex-wrap: wrap;}
        .body-list .list-item{width: 200px;border: 1px solid red;}
    </style>
</head>
<script>
    function autoWH() {
        var bili = 100/1920;
        var wH = window.innerHeight;
        var wW = window.innerWidth;
        var rem = wW*bili;
        $('html').css('font-size',rem+"px");
    }
    $(window).on('resize', function() {
        // 设置Iframe窗口大小
        autoWH();
    }).resize();
    autoWH();
</script>
<body>
    <div class="container" >
        <div class="header" >
            <div class="top_item" >item1</div>
            <div class="top_item" >item2</div>
            <div class="top_item" >item3</div>
            <div class="top_item" >item4</div>
        </div>
        <div class="container_body" >
            <div  class="body-left" >
                body-left
            </div>
            <div  class="body-center" >
                body-center
                <div class="body-list" >
                    <div class="list-item">list-item1</div>
                    <div class="list-item">list-item2</div>
                    <div class="list-item">list-item3</div>
                    <div class="list-item">list-item4</div>
                    <div class="list-item">list-item5</div>
                    <div class="list-item">list-item6</div>
                </div>
            </div>
            <div  class="body-right" >
                body-right
            </div>
        </div>
    </div>

</body>
</html>

爱学习的ljz

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
2020-12-14兼容屏幕分辨率的几种布局方式

兼容屏幕分辨率的几种布局方式如何改变文本的样式开发很多的项目是针对于不同的屏幕都要兼容的，一般是19201080，最低有时候需要支持到1024768，因此需要在布局上有一些适应屏幕的方式。有多中方式。1 最基本的是所有都卡死px，这样的话，当屏幕过小时，会出现滚动条，可以拖动显示。全都使用px的方式，不会受到屏幕的影响，当屏幕过小时可以拖动滚动条显示，但是效果很不好，有时候想在页面上看一个内容，还需要拖动滚动条才可以看完整，因此这种方式不推荐使用。2 可以考虑百分比，一般为了用户体验感，滚
复制链接

扫一扫

专栏目录