移动端web页面适配

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

miccyf

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

阅读量312

点赞数 1

分类专栏：企业工程实践（建党e家）文章标签： css javascript html

本文链接：https://blog.csdn.net/miccyf/article/details/116457515

版权

企业工程实践（建党e家）专栏收录该内容

2 篇文章 0 订阅

订阅专栏

px、em、rem

px:
像素（px）是相对于显示器屏幕分辨率而言的，px是逻辑像素，也叫css像素。
如：10个汉字要撑满整行，行内没有剩余空间。代码如下：

<style>
    *{margin: 0px;padding: 0px;}
    /* 消除默认的margin和padding值 */
    @media only screen and (width:320px) { div{font-size: 32px;} }
    @media only screen and (width:414px) { div{font-size: 41.4px;}}
    @media only screen and (width:375px) {div{font-size: 37.5px;}}
</style>

【注】在适配时，每个媒体查询都需要计算，并且显示不同的内容计算方式和结果也不同，故使用px进行适配并不合适。

em:
名称为相对长度单位。相对于当前对象内文本的字体尺寸，如果文本是10个汉字，1em指的是一个汉字的宽度，2em表示两个汉字的宽度。如果当前对行内文本的字体尺寸未被人为设置，则相对于浏览器的默认字体尺寸。
1em = 1个font-size的宽度，其中font-size是父标签的font-size值
仍以10个汉字为例，代码如下：

<style>
    *{margin: 0px;padding: 0px;}
    body{font-size: 10px;}
    div{font-size: 2em;}
    span{font-size: 2em;}
</style>
<body>
  国破<div>山河在<span>城</span>春草木深</div>
</body>

em的不足：em是相对于设置em的标签的父元素来说的，容易产生字体大小逐层复合的连锁反应。
故适配使用em也不合适，因为em一直相对于父元素。

rem:
其中r表示root ， root是根的意思，指html标签。

rem与em的区别：在于使用rem为元素设定字体大小时，仍然是相对大小，但相对的只是html根元素。
1em ==》父元素中的font-size的大小
1rem ==》html 标签中的font-size的大小
如：html中font-size大小设置为34px
1rem = 34px ； 2rem = 68px

对于不支持它的浏览器，就多写一个绝对单位的声明。这些浏览器会忽略用rem设定的字体大小。代码如下：

p {font-size:14px; font-size:.875rem;}

适配：

达到在大屏上显示是大盒子，在小屏上显示是小盒子的效果。

如果是大屏，字体设置的大一点。

如果是小屏，字体设置的小一点。

在不同的屏幕大小里都可以保证样式。

如：10个汉字，在不同大小的屏幕中均显示撑满一行。

媒体查询+rem实现适配

例：一张设计图：一行文字，有10个字，在750px的屏上是撑满一行的，还有一张图片，占手机屏的一半。

利用媒体查询+rem来适配，步骤如下：

得到设计稿，一般情况下，设计稿的尺寸是750px
通常把浏览器的模拟器也调成750px
严格按照设计稿，以rem为单位，把设计稿还原出来
开始写样式，需要确定html标签的font-size，通常会把font-size设置成100px，叫做rem的基准值。

量出一个盒子，width是20px 1rem是100px，换成rem是0.2rem

到此，先不要管适配，就在750的屏上，还原750的设计稿，量设计稿量出的px单位，只需要除以100就成了rem单位
最后一步，把写好的页面，迁移到其他屏上，完成适配

迁移时也需要换算，换算如下：

750的屏上，html的font-size的大小为100px

750的屏上，html的font-size的大小为50px

320的屏上，html的font-size的大小为42.666666px

414的屏上，html的font-size的大小为55.2px

使用媒体查询+rem来实现上述例子需要写如下代码：

<style>
    *{margin: 0px;padding: 0px;}
    @media only screen and (width:750.400px) { html{font-size: 100px;}}
    .title{font-size: 0.75rem;}
    img{width: 3.75rem;}
</style>  
<body>
  <div class="title">国破山河在<span>城</span>春草木深</div>
  <!-- 默认情况下，图片多大，手机上就显示多大 -->
  <img src="./photo.png" alt="">
</body>

以上代码完成了前四个步骤，将页面在750px的屏上完整实现。

<style>
	@media only screen and (width:375.200px) { html{font-size: 50px;}}
    @media only screen and (width:320px) { html{font-size: 42.6666px;}}
    @media only screen and (width:414.400px) { html{font-size: 55.2px;}}
</style>

如果要写的适配的屏种类比较多，那么我们需要写大量的媒体查询的代码。
故可以采用JS+px的方式进行适配。

JS+px进行适配：
JS+rem的适配方法更加适合于，要适配的屏幕种类多的情况
代码如下：

<style>
    *{margin: 0px;padding: 0px;}
    .title{font-size: 0.75rem;}
    img{width: 3.75rem;}
</style>

<script>
    let docEle = window.document.documentElement;//获取窗口大小
    // 计算不同屏的html标签的font-size值
    function refresh(){
      let width = docEle.getBoundingClientRect().width;//获取一屏的大小
      if(width>750.400){width=750.400;}
      let fs = width / 7.5;
      document.querySelector("html").style.fontSize = fs + "px";
    }
    refresh();
    // 改变页面大小
    window.addEventListener("resize",()=>{
      refresh()
    })
    // 页面的显示和隐藏
    window.addEventListener("pageshow",()=>{
      refresh()
    })
  </script>

以上代码是通过JS和px进行适配，
其中，width是获取到的设备独立像素，假设要适配的设备对应的像素值为x,
那么，
在这里插入图片描述
从而可以得到：x=width/7.5

miccyf

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
移动端web页面适配

px、em、rempx:像素（px）是相对于显示器屏幕分辨率而言的，px是逻辑像素，也叫css像素。如：10个汉字要撑满整行，行内没有剩余空间。代码如下：<style> *{margin: 0px;padding: 0px;} /* 消除默认的margin和padding值 */ @media only screen and (width:320px) { div{font-size: 32px;} } @media only screen and (wi
复制链接

扫一扫