移动端rem、vw布局案例1

最新推荐文章于 2022-09-05 16:04:17 发布
最新推荐文章于 2022-09-05 16:04:17 发布
阅读量256 收藏
点赞数
文章标签： css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43720739/article/details/105107248
版权 
<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <meta
      name="viewport"
      content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no"
    />
    <title></title>
    <link rel="stylesheet" href="css/reset.css" />
    <style type="text/css">
      /*为了让页面效果跟随浏览器窗口大小的变化而改变*/
      html {
        font-size: 26.67vw;
      } /*font-size:100px;*/
      html,
      body {
        height: 100%;
      }
      a{
          display: block;
      }
      header {
        height: 0.44rem;
        background: #387ec2;
        position: fixed;
        top: 0px;
        left: 0px;
        width: 100%;
      }
      header .logoImg {
        height: 0.3rem;
        margin: 0 auto;
        padding-top: 0.09rem;
      }
      header a:nth-child(1) {
        display: block;
        height: 0.3rem;
      }
      header .heaBtn {
        width: 0.22rem;
        position: absolute;
        right: 0.27rem;
        top: 0.12rem;
      }
      main {
        /* background: pink; */
        height: 100%;
        padding: 0.44rem 0 0.5rem;
        box-sizing: border-box;
      }
      .banner img {
        width: 3.75rem;
      }
      nav {
        display: flex;
        height: 0.32rem;
        background: #f2f2f2;
        align-items: center; /*在侧轴上居中*/
      }
      nav b {
        font-size: 0.15rem;
        padding-left: 0.1rem;
        padding-right: 0.1rem;
        display: flex;
        align-items: center; /*在侧轴上居中*/
      }
      nav b img {
        width: 0.13rem;
        margin-right: 0.05rem;
      }
      nav a {
        font-size: 0.11rem;
        color: #000;
        margin-left: 0.39rem;
      }
     
      .list{
        border-bottom: 0.11rem solid #f2f2f2;
        overflow: hidden;
      }
      .li{
          width: 0.93rem;
          height: 0.93rem;
          font-size: 0.13rem;
          overflow: hidden;
          float: left;
          border-bottom: 0.01rem solid #efeff4;
          border-right: 0.01rem solid #efeff4;
          box-sizing: border-box;
      }
      .li:nth-child(4n){
        border-right: none;
      }
      .li img {
          width: 0.27rem;
          margin: 0.21rem auto 0.07rem;
      }
      .li p{
          margin: 0 auto;
          text-align: center;
      }

      .news{
        height:0.37rem ;
        background:#fff;
        padding-left: 0.16rem;
        padding-right: 0.12rem;
        
        display: flex;
        justify-content: space-between;
        align-items: center;
        border-bottom: 0.01rem solid #efeff4;

       
      }

      .news img{
        width: 0.18rem;
        height: 0.15rem;
        margin-right: 0.11rem;
      }
      .news h2{
        height: 100%;
        
        
        box-sizing: border-box;
        display: flex;
        align-items: center;
        

        font-size: 0.16rem;
       padding-left: 0.13rem;
        
      }
      .news a{
        display: inline;
        
        font-size: 0.13rem;
        color: #6c6c6c;
      }

      .conList{
        margin-left: 0.15rem;
        
        /* background: pink; */
      }
      dl{
       
        border-top:1px solid #e4e4e4;
        padding: 0.14rem 0;
        /* background: skyblue; */
        display: flex;
        
      }
      dt{
        width: 0.95rem;
        height: 0.69rem;
        margin-right: 0.15rem;
      }
      dt img{
        width: 100%;
      }
      dd{
        width: 200px;
        height: 0.69rem;
        /* background: red; */

      }
      .conList h2{
        font-size: 0.15rem;
        width: 2.11rem;
        font-family: "宋体";
        line-height: 0.18rem;
      }
      .conList .txt{
        font-size: 0.1rem;
      }
      .conLast{
        font-size: 0.11rem;
        display: flex;
        width: 2.33rem;
        justify-content: space-between;
        align-items: center;
         padding-top: 0.07rem;
      }
      .conLast span{
        /* padding-right: 0.16rem; */
        color: #8a8a8a;
      }
      .conLast .txt{
        width: 0.6rem;
        height: 0.2rem;
        border: 1px solid #ed7150;
        line-height: 0.2rem;
        text-align: center;
        color: #ed7150 ;
       
      }

      footer {
        position: fixed;
        bottom: 0px;
        left: 0px;
        width: 100%;
        height: 0.5rem;
        background: #e1e1e1;
        display: flex;
        justify-content: space-around;
        color: black;
        font-size: 0.09rem;
      }
      footer a {
          display: block;
           color: #929292;
           margin-top: 0.07rem;
           text-align: center;
          
        /* margin: 0.07rem 0.32rem 0.02rem 0.32rem; */
      }
      footer a img {
        height: 0.24rem;
        width: 0.24rem;
      }
      footer p{
          text-align: center;
         margin-top: 5px;
      }
      footer .active{
        color: #387ec2;
      }
      /*ps中测量出来的大小减半 再除以100*/
    </style>
  </head>
  <body>
    <header>
      <a href="">
        <img class="logoImg" src="img1/logo.jpg" alt="" />
      </a>
      <a href="">
        <img class="heaBtn" src="img1/btn.jpg" alt="" />
      </a>
    </header>
    <main>
      <div class="content">
        <div class="banner">
          <img src="img1/banner.jpg" alt="" />
        </div>
        <nav>
          <b><img src="img1/btn2.jpg" />学员必看:</b>
          <a href="">退考须知</a>
          <a href="">退考须知</a>
        </nav>
        <div class="con">
            <div class="list">
                <a class="li">
              <img src="./img1/home.jpg" alt="" />
              <p>企业发展</p>
                </a>
                <a class="li">
              <img src="./img1/home.jpg" alt="" />
              <p>企业发展</p>
             </a>
             <a class="li">
              <img src="./img1/home.jpg" alt="" />
              <p>企业发展</p>
                </a>
                <a class="li">
              <img src="./img1/home.jpg" alt="" />
              <p>企业发展</p>
                <a class="li">
                <img src="./img1/home.jpg" alt="" />
              <p>企业发展</p>
                </a>
                <a class="li">
              <img src="./img1/home.jpg" alt="" />
              <p>企业发展</p>
             </a>
                <a class="li">
              <img src="./img1/home.jpg" alt="" />
              <p>企业发展</p>
                </a>
                <a class="li">
              <img src="./img1/home.jpg" alt="" />
              <p>企业发展</p>
                <a class="li">
              <img src="./img1/home.jpg" alt="" />
              <p>企业发展</p>
                </a>
                <a class="li">
              <img src="./img1/home.jpg" alt="" />
              <p>企业发展</p>
                </a>
                <a class="li">
              <img src="./img1/home.jpg" alt="" />
              <p>企业发展</p>
                </a>
                <a class="li">
              <img src="./img1/home.jpg" alt="" />
              <p>企业发展</p>
               </a>
            </div>
           
        <div class="news">
            <h2><img src="./img1/images/audio_03.png" alt=""> 新闻资讯</h2>
            <a href="#">查看更多</a>
        </div>
        <div class="conList">
          <dl>
            <dt><img src="./img1/con1.jpg" alt=""></dt>
            <dd>
              <h2>哈哈哈哈哈哈哈哈哈哈或海带丝哦豁</h2>
              <div class="conLast">
                <p class="txt">海驾活动</p>
                <span>14天前</span>
              </div>
            </dd>
          </dl>
          <dl>
            <dt><img src="./img1/con1.jpg" alt=""></dt>
            <dd>
              <h2>哈哈哈哈哈哈哈哈哈哈或海带丝哦豁</h2>
              <div class="conLast">
                <p class="txt">海驾活动</p>
                <span>14天前</span>
              </div>
            </dd>
          </dl>
          <dl>
            <dt><img src="./img1/con1.jpg" alt=""></dt>
            <dd>
              <h2>哈哈哈哈哈哈哈哈哈哈或海带丝哦豁</h2>
              <div class="conLast">
                <p class="txt">海驾活动</p>
                <span>14天前</span>
              </div>
            </dd>
          </dl>
          <dl>
            <dt><img src="./img1/con1.jpg" alt=""></dt>
            <dd>
              <h2>哈哈哈哈哈哈哈哈哈哈或海带丝哦豁</h2>
              <div class="conLast">
                <p class="txt">海驾活动</p>
                <span>14天前</span>
              </div>
            </dd>
          </dl>
          <dl>
            <dt><img src="./img1/con1.jpg" alt=""></dt>
            <dd>
              <h2>哈哈哈哈哈哈哈哈哈哈或海带丝哦豁</h2>
              <div class="conLast">
                <p class="txt">海驾活动</p>
                <span>14天前</span>
              </div>
            </dd>
          </dl>
          <dl>
            <dt><img src="./img1/con1.jpg" alt=""></dt>
            <dd>
              <h2>哈哈哈哈哈哈哈哈哈哈或海带丝哦豁</h2>
              <div class="conLast">
                <p class="txt">海驾活动</p>
                <span>14天前</span>
              </div>
            </dd>
          </dl>
        </div>
          </div>
           
        </div>
      </div>
    </main>
    <footer>
      <a href="#" class="active">
        <img src="./img1/circle.jpg" alt="" />
        <p>首页</p>
      </a>
      <a href="#">
        <img src="./img1/circle.jpg" alt="" />
        <p>首页</p>
      <a href="#">
        <img src="./img1/circle.jpg" alt="" />
        <p>首页</p>
      <a href="#">
        <img src="./img1/circle.jpg" alt="" />
        <p>首页</p>
      </a>
    </footer>
  </body>
</html>

效果图如下：12

Rainbow~小二
关注
css之移动端适配方案rem与less&媒体查询响应式布局&bootstrap
qq_66318904的博客
03-25 1661
less是一个css预处理器，less文件后缀是.less。扩充了css语言，使css具备一定的逻辑性，计算能力。注意：浏览器不识别less代码，目前阶段，网页要引入对应的css文件vscode插件：easy less，保存less文件后自动生成对应的css文件。
移动端rem布局实例
weixin_42668319的博客
02-29 713
逆战班学生记录： rem理解： em是一个相对单位，1em等于当前元素或父元素的font-size值 rem是指相对于根元素的字体大小的单位。简单的说它就是1个html标签的font-size大小。 rem的布局 原理： 先根据设计图量取高度，想办法动态改变html标签的font-size大小，然后转换成rem，从而适配不同设备进行等比例缩放。这里如何使font-size动态化？我采用通过vw（...
移动端rem字体适配示例
weixin_34087503的博客
06-05 126
虽然很简单，但是为了需要的时候能直接 ctrl + C / ctrl + V ，还是写一下存着。嘿嘿@media screen and (min-width: 320px) { html { font-size: 13.65333px; } } @media screen and (min-width: 360px) { html {...
移动端使用rem布局-案例
JackieDYH的博客
06-29 433
在页面引入这段js代码 (function (doc, win) { var docEl = doc.documentElement, resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize', recalc = function () { var clientWidth = docEl.clientWidth;
移动端REM布局与ViewportVW布局的实例运用
08-10
移动端 REM布局 与 Viewport (VW) 布局的实例运用
html vw布局,完美的响应式布局vw+vh+rem屏幕适配方案！
weixin_29233857的博客
06-19 2184
一、前言根据前面写的 你不知道的css单位，进行了一种响应式布局的思考。视口布局的优点：宽度和高度全部自动适应！再加上rem布局的字体适应，可以完美解决各种屏幕适配问题！单位可参考 ： 你不知道的css单位该布局兼容性如下：iefirefoxchromesafarioperaios safariandroid browserandroid chrome9.0+2.0+4.0+3.1+3.5+3.2...
【新】移动端web （flex布局 rem / vw vh 布局）
chenlaining的博客
04-26 420
1.pc端和移动端网页的不同点 ①pc屏幕大，网页用版心 ②手机屏幕小，网页宽度多数为100% 2.分辨率（越高越好） 物理分辨率：生产屏幕时就固定的，不可被改变 逻辑分辨率（设备宽度）：由软件驱动所决定 （制作网页时考虑）375×667 3.视口（viewport）：浏览器显示页面内容的屏幕区域 无视口标签则宽度为980像素（默认） 使用mate标签设置视口宽度，制作适配不同设备宽度的网页（自动生成） 作用：设定html的宽度，使所制作的网页宽度与其设备相适应 pc端的视口尺寸不一致，根
html5移动端vw+rem页面适配详解、案例实践（flexible.js插件）
weixin_43513126的博客
03-14 2021
rem布局适配的原理简单来说，就是根据屏幕的大小，动态的改变html标签的font-size的大小，以此就可以配合媒体查询微调做到不同屏幕的适配。 rem一般都有一个标配机型： 大多数开发者调试页面，一般以两种标配机型为主要测试 （UI一般只会提供 750px 或者是 640px 的设计稿，这就要求我们通过一张设计稿能够适配所有的屏幕） 最常用的以iPhone6/7/8：750px 现以相对较少...
十四、vw vh移动端布局，关于移动端的两种布局以及常用单位
快乐de馒头
09-05 2986
移动端常用的布局、；
vue 移动端布局方案
想吃凤梨酥的博客
08-16 675
vue 移动端布局方案
day06 移动适配：vw/vh
weixin_43730921的博客
02-09 592
移动适配：vw/vh
移动端vw布局详解
热门推荐
zjw0742的博客
02-19 16万+
有关于移动端的适配布局一直以来都是众说纷纭，对应的解决方案也是有很多种。在《使用Flexible实现手淘H5页面的终端适配》提出了Flexible的布局方案，随着viewport单位越来越受到众多浏览器的支持，因此在《再聊移动端页面的适配》一文中提出了vw来做移动端的适配问题。到目前为止不管是哪一种方案，都还存在一定的缺陷。言外之意，还没有哪一个方案是完美的。事实上真的不完美？其实不然。最近为了新...
超详细的rem+vw移动端屏幕适配方案
im_dogg的博客
11-23 1万+
在说具体内容之前，我们必须了解几个概念，就是：Retina屏、物理像素、设备独立像素、设备像素比 在CSS中我们一般使用px作为单位，需要注意的是，CSS样式里面的px和物理像素并不是相等的。CSS中的像素只是一个抽象的单位，在不同的设备或不同的环境中，CSS中的1px所代表的物理像素是不同的。在PC端，CSS的1px一般对应着电脑屏幕的1个物理像素，但在移动端，CSS的1px等于几个物理像素是...
苏宁首页案例（rem布局）
yexiangCSDN的专栏
05-11 519
一、rem适配方案 1. 让一些不能等比自适应的元素，达到当设备尺寸发生改变的时候，等比例适配当前设备。 2. 使用媒体查询根据不同设备按比例设置html的字体大小，然后页面元素使用rem做尺寸单位，当html字体大小变化元素尺寸也会发生变化，从而达到等比缩放的适配。 rem 实际开发适配方案 ① 按照设计稿与设备宽度的比例，动态计算并设置 html 根标签的 font-size 大小；（媒体查询） ② CSS 中，设计稿元素的宽、高、相对位置等取值，按照同等比例换算为 rem 为单位的值； ..
移动端适配-vw例子
qq_37635519的博客
06-16 784
点击查看页面 点击查看源码 html部分 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> &...
css中的rem的使用实例和要义说明
洛神赋
08-02 1356
&lt;html&gt; &lt;head&gt; &lt;style&gt; html { font-size: 0.625; /*根元素默认的大小是16px*/ } #peotry { font-size: 10px; } #header { f...
VUE项目自适应设置使用vw + rem实现页面布局适配
qq_41623635的博客
11-23 1397
使用vw是为了让元素的大小能受到屏幕大小的变化而控制 让整体使用rem的单位,跟随html中font-size的设置 640设计图: 100vw = 满屏 = 320px 1vw = 3.2px ?vw = 100px 100/3.2 = 31.25vw 得出 31.25vw = 100px ......
rem布局案例
DcTbnk的博客
03-09 542
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document&l...
html布局的适配 rem，font-size
qq_40578459的博客
08-12 1958
对于html布局随着屏幕的增大而增大，font-size也是一样，详细讲解一哈 ##第一步 1、刚开始做页面布局的时候大家大部分都是用用px来作为单位，虽然是可以的，但是这个字体的大小就被固定死了，不管是屏幕增大还是减小，字体都是不变的，这样往往达不到我们需要的结果，布局的结果也不是很友好，所以我们需要一个长度单位来适配就是 rem，刚开始学的时候特别的陌生 因为没看过这样的单位，今天就带大家来了...
移动端rem布局与高清适配深度解析
对于1px问题，由于屏幕像素密度的不同，1px在不同设备上可能显示的实际宽度不一致，但flexible库的改良解决了这个问题，通过引入flexible单位（如rpx）来解决rem布局在高分辨率屏幕上的细微问题。 总结来说，移动端...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值