提供了编程的基础技术教程

zl程序教程

您现在的位置是：首页 >  后端

当前栏目

rem+css预处理+媒体查询与rem+flexible.js做网页适配

JS网页CSS预处理 查询 适配 媒体 rem
2023-06-13 09:12:15 时间

引入

  1. 页面布局文字能否随着屏幕大小变化而变化？
  2. 流式布局和flex布局主要争对宽度布局，那高度如何设置？
  3. 怎样让屏幕发生变化时候元素高宽等比例缩放？

rem是什么？l rem是一种新的单位，是一个相对单位，类似于em。 不同的是rem的基准是相当于html元素的字体大小

rem的优势？ 由于rem是基于html的字体大小，所以我们在不同屏幕大小的时候只需要设置html的font-size即可实现整体控制，以实现页适配

媒体查询 争对不同的屏幕尺寸设置不同的样式

@media mediatype and|not|only (media feature){
css..
}
  • @media声明媒体查询
  • mediatype 媒体类型
    • all 所有设备
    • print 打印机和打印预览
    • screen 电脑屏幕，平板，手机等
  • and not only 关键字
    • and 将多个媒体类型连接到一起
    • not排除某个媒体类型
    • only 指定某个特定媒体类型
  • media feature 媒体的特性 (宽高等)

例：

/*屏幕宽度小于等于800px的样式*/
@media screen and (max-width:800px){
  css...
}

媒体查询引入资源

<link href="320.css" media="screen adn (min-width:320px)">
<link href="640.css" media="screen adn (min-width:640px)">

当屏幕大于320px的时候引入320.css当屏幕尺寸大于640px的时候引入的是640css

rem适配方案

一、

  • css预处理语言
  • 媒体查询
  • rem

二、

  • flexible.js
  • rem

动态设置html标签font-size的大小 案例

  1. 如果设计稿是750px

2.假如我们把整个屏幕划分为15等份（10/20都可以） 3.那么每一份的大小作为html的字体大小如这里就是50px 4.那么在320px设备的时候，字体大小为320/15就是 21.33px 5.用我们页面元素的大小除以不同的html字体大小就会发现他们的比例还是相同的 6.比如我们以750标准设计稿 7.一个100100元素在750屏幕下，就是100/50，转换为rem就是2rem2rem 比例是1：1 8.在320屏幕下 html的字体大小为21.33则2rem=42.66px此时宽高都是42.66他们的比例还是1：1 9.但是已经实现了不同屏幕下页面元素盒子的比例缩放效果。

元素大小取值方法

  1. 页面元素的rem值=页面元素px/(屏幕宽度/划分的份数)
  2. html的font-szie就等于 屏幕宽度/划分的份数
  3. 也就是 页面元素的rem指=页面元素px指/html的标准font-size(这里的标准是指以哪个尺寸的设计稿算出来的font-size值)

rem配合 flexible.js 使用第一种方式有点麻烦 如下代码 很多媒体查询

/* 设置常见屏幕尺寸，修改html文字大小*/
//320
/*划分份数为15*/
@num:15;
/*限定html大小 (pc打开直接50px)*/
html{
    font-size: 50px;
}
@media screen and (min-width:320px){
    html{
        font-size: 320px / @num;
    }
}
//360
@media screen and (min-width:360px){
    html{
        font-size: 360px / @num;
    }
}
/*375*/
@media screen and (min-width:375px){
    html{
        font-size: 375px/@num;
    }
}
/*384*/
@media screen and (min-width:384px){
    html{
        font-size: 384px/@num;
    }
}
/*400*/
@media screen and (min-width:400px){
    html{
        font-size: 400px/@num;
    }
}
/*414*/
@media screen and (min-width:414px){
    html{
        font-size: 414px/@num;
    }
}
/*424*/
@media screen and (min-width:424px){
    html{
        font-size: 424px/@num;
    }
}
/*480*/
@media screen and (min-width:480px){
    html{
        font-size: 480px/@num;
    }
}
/*540*/
@media screen and (min-width:540px){
    html{
        font-size: 540px/@num;
    }
}
/*720*/
@media screen and (min-width:720px){
    html{
        font-size: 720px/@num;
    }
}
/*750*/
@media screen and (min-width:750px){
    html{
        font-size: 750px/@num;
    }
}

很多计算

.search-content{
    position: fixed;
    left:50%;
    top:0;
    transform: translateX(-50%);/*移动自己宽度的一半*/
    width: 15rem;
    height: 88rem / @baseFont;
    background-color: #ffc001;
    display: flex;
    .class{
        width: 44rem / @baseFont;
        height: 70rem /@baseFont;
        margin: 11rem /@baseFont 25rem / @baseFont 7rem / @baseFont 24rem / @baseFont;
        background-color: seagreen;
      }
      .search{
          flex:1;
          background-color: sandybrown;
      }
      .login{
        width: 75rem / @baseFont;
        height: 70rem / @baseFont;
        background-color: rosybrown;
        margin:10rem  / @baseFont
      }
}

每次设计到高宽都要除下font-size

解决办法是通过flexible.js github 它是手机淘宝团队出的简洁高效移动端适配库 我们不需要在写不同屏幕的媒体查询，因为js做了相关处理 它的原理是把当前设备划分为10等份，但是在不同设备下比例一致 我们要做的就是确定好我们当前设备的html文字大小就可以了 比如当前设计稿750px，那么我们只需要把html文字大小设置为75px(750px/10)就可以 里面页面元素rem值：页面元素的px值 / 75 剩下的交给flexible.js 如下

html{
  font-size: 20px!important;
}
body{
  min-width: 320px;
  max-width: 750px ;
  /*750划分10份每一份 75px 750/75=10=最大宽度*/
  width: 10rem; /*750/*/
  margin: 0 auto;
  line-height: 1.5;
  background-color: #f2f2f2;
}

但是我们还是要手动计算元素的rem值，也就是元素的像素除以html的font-size 750设计稿被分成10分那么html的font-size = 75px 也就是我们每个元素的高宽都要除下75 ，还是有点麻烦，之前我们用less还可以实现自动计算，现在确要我们手动计算了 不急如果你使用vscode那么只需要一个插件就能解决，这个插件能自动帮我们将px转换为rem

如下

搜索cssrem，箭头的方向就是我们html的font-size大小

最后将vscode重启即可

到这里还没有完，我们要在css定义一个最大的宽度，当屏幕宽度超过设计稿时，就使用设计稿的宽度 如下

@media screen and (min-width:750px){
  html{
    font-size: 75px!important;
  }
}

如果不添加这个代码在电脑上看上去会非常的大，显示不好看，因为我们只做了移动端的布局

到这里我们就可以直接按照设计稿进行编码了，并且实现自动适应

最后感谢pink老师 https://www.ixigua.com/home/1490567706713357/pseries/?preActiveKey=hotsoon

相关文章