您好!欢迎来到源码码网

HTML5页面移动端自适应布局的实现示例代码

  • 软件教程
  • 来源:源码码网
  • 编辑:admin
  • 时间:2021-02-02 21:20
  • 阅读:1120

文章主要介绍了html5移动端自适应布局的实现,文中通过示例代码介绍的非常详细,需要的朋友们下面随着小编来一起学习学习吧。

场景:为适应各种大小的屏幕

自适应布局我知道的两种方式

1.使用媒体查询,下面制定了几种适应方式,例如第一个表示屏幕宽度在320px-360px之间的,html字体大小适配为13.65px

<style>
   @media only screen and (max-width: 360px) and (min-width: 320px){
    html{
     font-size:13.65px;
    }   }
   @media only screen and (max-width: 375px) and (min-width: 360px){
    html{
     font-size:23.4375px;
    }   }
   @media only screen and (max-width: 390px) and (min-width: 375px){
    html{
     font-size:23.4375px;
    }   }
   @media only screen and (max-width: 414px) and (min-width: 390px){
    html{
     font-size:17.64px;
    }   }
   @media only screen and (max-width: 640px) and (min-width: 414px){
    html{
     font-size:17.664px;
    }   }
   @media screen and (min-width: 640px){
    html{
     font-size:27.31px;
    }   }
  </style>

2.响应式,获取到屏幕的宽度,计算出一定的比例大小,使用rem代替px,在使用的时候如 font-size:1rem,在不同屏幕大小的手机上展示的大小效果是不一样的,和手机屏幕的大小比例自适应。

image.png

<div id="div2" class="text" style="border: 0.04rem solid #ccc; 
height: 14rem;font-size: 0.5rem;">

至此,这篇关于html5移动端自适应布局的代码就实现了,关注源码码网,更多技术教程。

特别声明:
1、如无特殊说明,内容均为本站原创发布,转载请注明出处;
2、部分转载文章已注明出处,转载目的为学习和交流,如有侵犯,请联系客服删除;
3、编辑非《源码码网》的文章均由用户编辑发布,不代表本站立场,如涉及侵犯,请联系删除;
全部评论(0)
推荐阅读
  • PHP使用strtoupper()和strtolower()实现大小写转换
  • PHP使用strtoupper()和strtolower()实现大小写转换
  • 这是一个关于编程IT技术的问题。接下来,我将为您提供一篇关于如何在PHP中进行大小写转换的文章。在PHP中,要将字符串从小写转为大写,可以使用内置函数strtoupper()。下面是一个示例代码:
  • 源码教程
  • 来源:源码码网
  • 编辑:源码码网
  • 时间:2023-09-22 20:32
  • 阅读:156
  • PHP环境nginx配置fastcgi_pass unix:/tmp/php-cgi-80.sock
  • PHP环境nginx配置fastcgi_pass unix:/tmp/php-cgi-80.sock
  • PHP环境nginx要配置fastcgi_passunix:/tmp/php-cgi-80.sock;还是fastcgi_pass127.0.0.1:9000,这是一个编程IT技术类的问题。要确定当前的PHP环境是使用哪种配置,需要查看nginx配置文件中关于PHP的部分。通常在nginx.conf或者sites-enabled目录下会有相关的配置文件。在配置文件中,可以搜索到类似”location~.php$&
  • 源码教程
  • 来源:源码码网
  • 编辑:源码码网
  • 时间:2023-09-22 20:29
  • 阅读:146
  • redis怎么实现分布式锁?
  • redis怎么实现分布式锁?
  • Redis是一款开源的内存数据库,它不仅具备高性能和高可用性,还支持多种数据结构和丰富的功能。在分布式系统中,由于多个进程或线程同时访问共享资源,会引发竞态条件,可能导致数据不一致或不可预期的结果。为了解决这个问题,可以使用分布式锁来保证在某一时刻只有一个进程或线程可以对共享资源进行操作。在Redis中实现分布式锁有多种方式,下面介绍其中一种常见的方法。1、设置锁首先,生成一个唯一的标识符作为锁的名称。可以使用UUID等方式生成一个全局
  • 源码教程
  • 来源:源码码网
  • 编辑:源码码网
  • 时间:2023-09-22 20:23
  • 阅读:196
  • php中常用的数组函数有什么?
  • php中常用的数组函数有什么?
  • 在PHP编程中,数组是一种非常常见和常用的数据类型。它可以存储多个值,并且可以通过键值对的形式进行访问。为了便于对数组进行操作和处理,PHP提供了许多有用的数组函数。下面我们将介绍一些常用的数组函数。1.count0:该函数用于返回数组中元素的个数,例如,如果有一个数组arr,你可以使用count(ar)来获取数组中的元素个数2aray_push小:该数用于向数组的未尾添加一个或多个元素,语法为aray.pushSar$eleme
  • 源码教程
  • 来源:源码码网
  • 编辑:源码码网
  • 时间:2023-09-22 20:14
  • 阅读:159
  • 如何隐藏服务器的真实IP地址?
  • 如何隐藏服务器的真实IP地址?
  • 如何隐藏服务器的真实IP地址,是我们为了应对DDOS、CC等网络攻击的一种有效方法,可以让攻击者找不到我们真实的攻击目标而无法攻击,从而保护我们的网站。隐藏服务器真实IP的几种方法:1、CDN:使用CDN节点加速,虽然CDN的主要作用是加速网站,但CDN也是可以隐藏服务器真实IP的,只不过CDN也有缺点,如果采用国内CDN,国外的黑客就可以利用工具获取服务器真实IP,因为国内CDN对国外没用。2、域名导向:与CDN有相同作用,隐藏服务器
  • 行业资讯
  • 来源:源码码网
  • 编辑:源码码网
  • 时间:2023-09-22 16:13
  • 阅读:143
联系客服
源码代售 源码咨询 素材咨询 联系客服
029-84538663
手机版

扫一扫进手机版
返回顶部