HTML5+rem页面布局适配方法

最新推荐文章于 2025-06-27 19:45:56 发布

原创最新推荐文章于 2025-06-27 19:45:56 发布 · 252 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#html #css #js #css3

布局专栏收录该内容

1 篇文章

订阅专栏

本文展示了移动端网页的HTML结构与CSS样式实现，包括视频播放、字体适配、响应式布局以及内容展示的细节。通过设置不同屏幕宽度下的CSS断点，实现了不同设备上的良好视觉体验。同时，页面包含多个列表项，每个项由图片、文字描述和操作按钮组成，适合用于内容展示型应用。

示例

<html>
  <meta charset="UTF-8">
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<meta content="width=device-width,initial-scale=1,user-scalable=no" name="viewport" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-touch-fullscreen" content="yes" />
<meta name="format-detection" content="telephone=no,address=no" />
<meta name="apple-mobile-web-app-status-bar-style" content="white" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <head>
        <script src="vue.js"></script>
        <style type="text/css">
          video{
            width: 100%;
            object-fit:fill;
            }
            @media screen and ( min-width: 320px){html{font-size:50px}}
            @media screen and ( min-width: 360px){html{font-size:56.25px}}
            @media screen and ( min-width: 375px){html{font-size:58.59375px}}
            @media screen and ( min-width: 384px){html{font-size:60px}}
            @media screen and ( min-width: 400px){html{font-size:62.5px}}
            @media screen and ( min-width: 414px){html{font-size:64.6875px}}
            @media screen and ( min-width: 424px){html{font-size:66.25px}}
            @media screen and ( min-width: 480px){html{font-size:75px}}
            @media screen and ( min-width: 540px){html{font-size:84.375px}}
            @media screen and ( min-width: 640px){html{font-size:100px}}
            .container {
              width: 100%;
              font-size: 0.28rem;
            }
            .nav {
              /* height: 4rem;
              background-color: #ccc; */
            }
            .mian {
              background-color: #ccc;
               
            }
            ul {
              list-style-type: none;
              margin: 0;
              padding: 0;
              width: 6.2rem;
            }
            ul li {
             width: 3.1rem;
             float: left;
             padding: 0.2rem;
             box-sizing: border-box;
            }
            .img {
              display: inline-block;
              width: 100%;
            }
            img {
              width: 100%;
              
            }
            .text {
              height: 0.8rem;
              border: 1rpx solid #6db33f;
              display: -webkit-box;
              overflow: hidden;/*超出部分隐藏*/
              text-overflow:ellipsis;/* 超出部分显示省略号 */
              white-space: normal;/*规定段落中的文本不进行换行 */
              word-wrap: break-word;
              -webkit-line-clamp:2;
              -webkit-box-orient: vertical;
            }
            .mes {
              display:flex ;
              justify-content:space-between;
              padding: 1%;
            }
            .left {

            }
            .right {

            }
        </style>
    </head>
    <body>
        <div class="container">
          <div class="header">
            <!-- <video controls>
              <source src="https://vd2.bdstatic.com/mda-mdbn24h7nsti4cpf/hd/mda-mdbn24h7nsti4cpf.mp4?v_from_s=hkapp-haokan-nanjing&auth_key=1628215057-0-0-9b3e5778602391384cf1b93c2822dd79&bcevod_channel=searchbox_feed&pd=1&pt=3&abtest=3000186_2" type="video/mp4"></source>
            </video> -->
          </div>
          <div class="nav">
          </div>
          <div class="mian">
             <ul>
               <li>
                 <div class="img"> 
                   <img src="../error.png" alt="" srcset="">
                   <div class="icon"></div>
                  </div>
                  <div class="text">我是内容我是内容我是内容我是内容我是内容我是内容</div>
                  <div class="mes">
                    <div class="left">11111</div>
                    <div class="right">按钮</div>
                  </div>
               </li>
               <li>
                 <div class="img"> 
                   <img src="../error.png" alt="" srcset="">
                   <div class="icon"></div>
                  </div>
                  <div class="text">我是内容</div>
                  <div class="mes">
                    <div class="left">11111</div>
                    <div class="right">按钮</div>
                  </div>
               </li>
               <li>
                <div class="img"> 
                  <img src="../error.png" alt="" srcset="">
                  <div class="icon"></div>
                 </div>
                 <div class="text">我是内容</div>
                 <div class="mes">
                   <div class="left">11111</div>
                   <div class="right">按钮</div>
                 </div>
              </li>
              <li>
                <div class="img"> 
                  <img src="../error.png" alt="" srcset="">
                  <div class="icon"></div>
                 </div>
                 <div class="text">我是内容</div>
                 <div class="mes">
                   <div class="left">11111</div>
                   <div class="right">按钮</div>
                 </div>
              </li>
             </ul>
          </div>
        </div>
        <script>
          
        </script>
    </body>
</html>