HTML5+rem页面 布局适配方法

最新推荐文章于 2024-04-13 21:21:47 发布
最新推荐文章于 2024-04-13 21:21:47 发布
阅读量166 收藏
点赞数
分类专栏： 布局 文章标签： html css js css3
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Zero_zero1/article/details/119453271
版权

示例

<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>

效果

在这里插入图片描述

god_yu_
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
html5如何利用rem实现自适应布局,使用Rem布局实现自适应
weixin_42105570的博客
06-10 3751
之前写过一篇移动端适配的文章，很长，内容太多，看得容易凌乱，重新写个通熟易懂版的。为什么要自适应？比如，对于一个移动端页面，设计师给的视觉稿画布宽 750，视觉稿中的一个黄色区块的尺寸是 702 x 300，并在画板中居中。我们希望在任何一个设备中的呈现比例都与视觉稿中一样，根据布局视口宽度等比缩放。在移动端我们一般会设置布局视口宽度=设备宽度，即内容呈现的区域在设备屏幕内。但不同设备的宽度不同，...
移动端开发之rem适配布局、媒体查询和Less基础
weixin_63156135的博客
10-20 726
移动端开发之rem适配布局、媒体查询和Less基础
html和rem的适配
牛先森家的博客
05-10 1811
html和rem的适配： 1、rem基础 单位有px，pt，em，% em：相对大小（相对于父元素的font-size的值），比如div里面有一个p元素，当div设置font-size为12px，p元素的width：10em，此时p的width相对大小为120px； rem（root em）：是一个相对单位，类似于em，em是父元素字体大小。不同的是rem的基准是相对于html元素的字体大小，比如...
html设置根rem,html rem适配
weixin_36114835的博客
06-11 762
rem 布局适配方案主要方法为：按照设计稿与设备宽度的比例，动态计算并设置 html 根标签的 font-size 大小；css 中，设计稿元素的宽、高、相对位置等取值，按照同等比例换算为 rem 为单位的值；设计稿中的字体使用 px 为单位，通过媒体查询稍作调整。上代码JS代码：window.addEventListener('orientationchange', setRem);window...
html5布局原理,html5页面rem布局适配方法详解
weixin_34462016的博客
06-01 180
本文主要介绍了详解html5页面 rem 布局适配方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧，希望能帮助到大家。rem 布局适配方案主要方法为：按照设计稿与设备宽度的比例，动态计算并设置 html 根标签的 font-size 大小；css 中，设计稿元素的宽、高、相对位置等取值，按照同等比例换算为 rem 为单位的值；设计稿中的字体使用 px 为单位，通过媒...
详解html5页面 rem 布局适配方法
09-27
本篇文章主要介绍了详解html5页面 rem 布局适配方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
数据可视化基础项目+h5css3+javascript+echarts+flex+rem适配
05-18
在这个项目中，“数据可视化基础项目+h5css3+javascript+echarts+flex+rem适配”是一个综合性的实践，涵盖了多个关键的技术领域。 首先，HTML5是现代网页开发的基础，它引入了许多新特性，如语义化标签（如、、等）...
详解H5 活动页之移动端 REM 布局适配方法
09-27
REM布局适配方案是目前更为推荐的方法。它涉及到以下三个步骤： - **动态设置html的font-size**：根据设计稿与设备宽度的比例计算font-size。比如，如果设计稿宽度为750px，而设备宽度为375px，我们可以将html的...
html5 移动界面 lex + rem + + flexible.js + LESS
03-20
综上所述，"html5 移动界面 lex + rem + flexible.js + LESS" 的组合，通过HTML5的先进特性、Flexbox的灵活布局、rem的响应式单位、flexible.js的适配处理以及LESS的代码组织，共同构建出适应各种设备、屏幕尺寸和...
黑马面面 flexible+rem布局
04-23
在前端开发领域，"flexible+rem布局"是一种常见的响应式设计方法，它结合了Flexbox布局模型（Flexible Box）和相对单位rem（root em），用于实现不同屏幕尺寸下的自适应界面。这两种技术的结合使得网页能够更好地...
rem适配两种方案——实战篇
最新发布
爱游戏爱学习的博客
04-13 1835
用屏幕总宽度/划分等份数=html字体大小1rem=html字体大小页面元素rem计算公式：页面元素的px / html字体大小。
html5布局原理,详解html5页面 rem 布局适配方法
weixin_42451850的博客
06-01 163
rem 布局适配方案主要方法为：按照设计稿与设备宽度的比例，动态计算并设置 html 根标签的 font-size 大小；css 中，设计稿元素的宽、高、相对位置等取值，按照同等比例换算为 rem 为单位的值；设计稿中的字体使用 px 为单位，通过媒体查询稍作调整。1 动态设置 html 标签 font-size 大小精简通用版本：!(function(win, doc){ function s...
移动端布局——移动适配
m0_45659764的博客
04-05 3856
什么叫移动适配？网页元素的宽高都要随着设备的宽度等比缩放 如何实现？ rem：目前多数企业再用的解决方案 vw/vh：未来的解决方案 一、rem 能够使用rem单位设置网页元素的尺寸 网页效果 屏幕宽度不同，网页尺寸不同（等比缩放） px单位或百分比布局可以实现吗？ px单位是绝对单位 百分比布局特点宽度自适应，高度固定 rem单位 相对单位 rem单位相对于HTML标签（根标签）的字号计算结果 1rem=1HTML字号大小 注意：使用re...
HTML Rem自适应方案
热门推荐
love and share
12-16 1万+
1. 设置标签头 <meta charset="utf-8" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport" /> 2. 设置body html 全屏 <style> html,...
移动端页面开发适配 rem布局原理
风中追风
03-19 4537
我们拿到的设计图一般是以640，750，1080分辨率为基准设计的，而现在的手机终端各式各样，分辨率不同，逻辑像素不同 ，适口不同，所以为了让我们的页面在每个设备上都可以良好的展示，那么就需要为这些设备做统一的处理，这个过程就称为移动端适配。需要知道的一些概念：物理像素(physical pixel)一个物理像素是显示器(手机屏幕)上最小的物理显示单元，可以理解为我们平时说的分辨率；设备独立像素(density-independent pixel)
前端rem适配(自适应布局)
Reset_Xc的博客
03-30 3840
前端rem适配
html页面使用rem
leng0920的博客
03-26 421
html页面使用rem
【HTML+CSS】移动端布局之rem布局
qq_30148319的博客
05-01 1758
学习视频及笔记来源： 黑马程序员pink老师前端入门教程，零基础必看的h5(html5)+css3+移动端前端视频教程_哔哩哔哩_bilibili 一、rem基础 1、概念 rem是一个相对单位，类似em。 rem与em区别：em是相对于父元素字体大小而言的；rem是相对于html元素的字体大小而言的。 rem的优势：度元素文字大小可能不一致，但是整个页面只有一个html，可以很好来控制整个页面的元素大小（可以根据具体屏幕的大小来适配不同的字体大小）。 2、语法 /* 根html 为 12p
h5页面的写法_H5 页面 rem 布局适配方法
weixin_39702483的博客
12-19 434
rem 布局适配方案主要方法为：按照设计稿与设备宽度的比例，动态计算并设置 html 根标签的 font-size 大小；css 中，设计稿元素的宽、高、相对位置等取值，按照同等比例换算为 rem 为单位的值；设计稿中的字体使用 px 为单位，通过媒体查询稍作调整。1 动态设置 html 标签 font-size 大小精简通用版本：!(function(win, doc){function set...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值