html 移动端的屏幕适配问题

最新推荐文章于 2024-09-05 14:16:55 发布
最新推荐文章于 2024-09-05 14:16:55 发布
阅读量1.7k 收藏 10
点赞数 1
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/guoqingru0311/article/details/119022927
版权
本文详细探讨了移动端屏幕适配的三个方面：视口设置、Retina屏幕适配以及不同布局策略。通过设置meta标签实现视口适配，确保页面在不同设备上的显示效果。针对Retina屏幕，介绍了如何调整尺寸以达到清晰显示。在布局方面，讲解了流体布局的calc()函数和box-sizing属性应用，以及响应式布局和基于rem的布局策略，展示了如何根据不同屏幕尺寸调整元素大小和布局，实现等比缩放。
摘要由CSDN通过智能技术生成

移动端的屏幕适配问题

在这里插入图片描述
在这里插入图片描述

1、视口

未添加语句前：
在这里插入图片描述
在这里插入图片描述
添加语句后：
在这里插入图片描述
显示效果如下：
在这里插入图片描述
代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Title</title>
    <style type="text/css">
        .box{
            width: 300px;
            height: 300px;
            border: 2px solid black;
            background-color: pink;
        }
    </style>
</head>
<body>
        <div class="box">div里面的文字</div>
</body>
</html>

2、retina屏幕的适配

在这里插入图片描述
未适配前：
在这里插入图片描述
显示效果：
在这里插入图片描述
进行retina屏幕适配：
在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>retina屏幕适配</title>
    <style type="text/css">

        /*关于通过样式将尺寸设置为原先的一半retina屏幕的适配*/
        .shipei{
            width: 300px;
            height: 215px;
        }
    </style>
</head>
<body>
    <img src="./images/pic1x.jpg" alt="pic1x">
    <img src="./images/pic2x.jpg" alt="pic2x" class="shipei">

</body>
</html>

显示效果如下所示：

在这里插入图片描述

----------------------------华丽的分割线----------------------------------

3、适配布局类型

1、流体布局

方式1：calc()函数

在这里插入图片描述

未使用流体布局前：

在这里插入图片描述
在这里插入图片描述

显示效果如下

使用流体布局后：

在这里插入图片描述
代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>68_流体布局</title>
    <style type="text/css">
        body{
            margin: 0;
        }
        .con a{
            float: left;
            display: block;
            /*width: 25%;     !*使用流体布局*!*/
            width: calc(25% - 4px);     /*使用流体布局*/
            height: 100px;
            background-color: gold;
            border: 2px solid black;
            text-decoration: none;
            text-align: center;
            line-height: 100px;
            color: black;
            font-size: 14px;
        }
    </style>
</head>
<body>
    <div class="con">
        <a href="#">菜单文字</a>
        <a href="#">菜单文字</a>
        <a href="#">菜单文字</a>
        <a href="#">菜单文字</a>
    </div>
</body>
</html>

显示效果如下：
在这里插入图片描述

方式2：使用box-sizing属性

在这里插入图片描述
在这里插入图片描述
代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>68_流体布局</title>
    <style type="text/css">
        body{
            margin: 0;
        }
        .con a{
            float: left;
            display: block;
            width: 25%;     /*使用流体布局*/
            /*width: calc(25% - 4px);     !*使用流体布局：方式一*!*/
            height: 100px;
            background-color: gold;
            border: 2px solid black;
            text-decoration: none;
            text-align: center;
            line-height: 100px;
            color: black;
            font-size: 14px;

            box-sizing: border-box;     /*方式二：设置此属性后，宽度就会从边框计算，加边框、加尺寸宽度是不变的*/
        }
    </style>
</head>
<body>
    <div class="con">
        <a href="#">菜单文字</a>
        <a href="#">菜单文字</a>
        <a href="#">菜单文字</a>
        <a href="#">菜单文字</a>
    </div>
</body>
</html>

显示效果如下：
在这里插入图片描述

2、响应式布局

在这里插入图片描述
在这里插入图片描述
代码如下所示：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>69_响应式布局</title>
    <style type="text/css">
        body{
            margin: 0;
        }
        .con div{
            /*每个盒子刚好占25%*/
            width: 23%;
            margin: 1%;
            border: 2px solid black;
            background-color: gold;
            height: 200px;
            float: left;

            box-sizing: border-box;/*流体布局方式，利用此属性将边框算入到23%内*/
        }
        /*即屏幕缩小到800时，*/
        @media (max-width: 800px) {
            .con div{
                width: 46%;
                margin: 2%;
            }
        }
        @media (max-width: 400px) {
            .con div {
                width: 94%;
                margin: 3%;
            }
        }
    </style>
</head>
<body>

<div class="con">
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
</div>

</body>
</html>

效果如下所示：
在这里插入图片描述

3、基于rem布局

情形一：

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>rem布局原理</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style type="text/css">
        .box01{
            font-size: 15px;
            width: 20em;
            height: 10em;
            background-color: gold;
        }
        .box02{
            font-size: 20px;
            width: 20em;
            height: 10em;
            background-color: green;
        }
        p{
            font-size: 20px;
            text-indent: 2em;
        }
    </style>
</head>
<body>
    <div class="box01"></div>
    <br>
    <br>
    <div class="box02"></div>
    <p>尤其是白伟拓还和张多磐打赌了，谁在新生晚会的节目上得分最高，拿了好名次，就可以去追求何美月，谁得分低，那就自动出局</p>
</body>
</html>

在这里插入图片描述

情形二：

在这里插入图片描述

<!DOCTYPE html>
<html lang="en" style="font-size: 20px">
<head>
    <meta charset="UTF-8">
    <title>rem布局原理</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style type="text/css">
        .box01{
            font-size: 15px;
            width: 20rem;
            height: 10rem;
            background-color: gold;
        }
        .box02{
            font-size: 20px;
            width: 20rem;
            height: 10rem;
            background-color: green;
        }
        p{
            font-size: 20px;
            text-indent: 2rem;
        }
    </style>
</head>
<body>
    <div class="box01"></div>
    <br>
    <br>
    <div class="box02"></div>
    <p>尤其是白伟拓还和张多磐打赌了，谁在新生晚会的节目上得分最高，拿了好名次，就可以去追求何美月，谁得分低，那就自动出局</p>
</body>
</html>

显示效果如下所示：
在这里插入图片描述

利用rem实现等比缩放

在这里插入图片描述
html代码：

<!DOCTYPE html>
<html lang="en" >
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- 引入js文件,实现等比缩放-->
    <script type="text/javascript" src="js/set_root.js"></script>
    <title>rem布局——头部文字效果</title>
    <style type="text/css">
        body{
            margin: 0;
        }
        .header{
            height: 2.5rem;
            background-color: gold;
            text-align: center;
            line-height: 2.5rem;
            font-size: 20px;
        }
    </style>

</head>
<body>
    <div class="header">头部文字效果</div>
</body>
</html>

js：代码

(function(){
	var calc = function(){
		var docElement = document.documentElement;
		var clientWidthValue = docElement.clientWidth > 750 ? 750 : docElement.clientWidth;
		docElement.style.fontSize = 20*(clientWidthValue/375) + 'px';
	}
	calc();
	window.addEventListener('resize',calc);
})();

显示效果如下所示：
在这里插入图片描述

转弯_gqr
关注
移动端屏幕适配
weixin_45395575的博客
04-08 695
移动端适配 移动端屏幕适配的作用是使页面在大小不一的移动端设配上都能正常的显示页面内容。 在编写移动端代码是需要在HTML页面head标签中添加以下代码 <head> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, ...
响应式和页面自适应自动适应屏幕大小开发精要
milijiangjun的博客
11-11 2796
1、首先在网页代码的头部，加入一行viewport标签 在网页的头部中增加以下这句话，可以让网页的宽度自动适应手机屏幕的宽度 <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no"> <!DOCTYPE html> <html> <head> <
HTML5 移动页面自适应手机屏幕四类方法总结
09-27
主要介绍了HTML5 移动页面自适应手机屏幕四类方法总结,非常具有实用价值，需要的朋友可以参考下
HTML屏幕适配
huyishero的博客
10-26 526
经过学习，现在主流的屏幕适配的做法有，流式布局、响应式布局、自适应布局、静态布局。 1.流式布局----指布局从上到下，像水流一样顺序布局，一般宽度使用百分比，高度使用固定值；优点是，如果设备的屏幕宽度变化了，可以自动适应，缺陷是由于宽度是自适应的，高度是固定的，所以会导致比例失衡，只有在部分开发预设宽度下会效果较好。流式就是当宽度大于多少时怎么展示，小于多少时怎么展示，而且展示的方式向
移动端前端开发：自适应响应式HTML5模板实战
最新发布
weixin_42452924的博客
09-05 2562
本文还有配套的精品资源，点击获取 简介：本资源提供了一套完整的HTML5移动端前端模板，包含自适应响应式网页源码，适用于手机、平板和电脑等多种设备。该模板展示了如何利用HTML5的新特性以及CSS3媒体查询等技术实现跨平台兼容性和优化用户体验。还包括了JavaScript的应用，以增强网站的交互性和动态效果。前端开发者可以利用这些模板和源码，快速构建起具有高度适应性和视觉吸...
Html 屏幕适配
开心的去学习->研究
02-05 291
flexible方案原理: <未实验> https://segmentfault.com/a/1190000003101394?_ea=306774 文字用px 剩下用rem /* media.css */ 就是之前会玲说的那个 @media screen and (min-width:320px) and (max-width:320px){ html{ font-size:320 / 320 * $basicRem; } } @media screen and (min-w.
html5屏幕适配
haiyang497661292的博客
05-18 2438
1、使用meta标签：viewport viewport标签极其属性： &lt;meta name="viewport" content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/&gt; 每个属性的详细介绍： 属性...
flexible 粘贴即用
前端从0到100000
08-20 487
//可自行对比 (function flexible (window, document) { var docEl = document.documentElement var dpr = window.devicePixelRatio || 1 // adjust body font size function setBodyFontSize () { if (document.body) { document.body.style.fontSize = (12 *
vue移动端屏幕适配详解
10-17
通过以上步骤，我们可以有效地解决Vue移动端的屏幕适配问题，使应用在各种屏幕尺寸下都能有良好的用户体验。记住，适配不是一次性的任务，而是需要持续关注和优化的过程，因为新的设备和屏幕尺寸总会不断出现。
一种便捷的移动端屏幕适配解决方案
08-12
"一种便捷的移动端屏幕适配解决方案"着重解决这个问题，尤其是在JavaScript开发环境下。本文将深入探讨这个解决方案，并提供相关的知识点。 首先，我们需要理解移动端屏幕适配的核心挑战。移动设备的屏幕尺寸各异，...
CSS像素以及移动端不同屏幕适配问题解决
11-21
在探讨CSS像素以及移动端不同屏幕适配问题时，首先要理解几个关键概念：物理像素、逻辑像素和CSS像素。物理像素是显示器上实际的最小显示单位，而逻辑像素是浏览器用来计算布局的抽象单位。CSS像素是Web开发中使用的...
如何实现移动端屏幕适配
06-07
移动端屏幕适配可以通过以下几种方式来实现： 1. 使用viewport标签：通过设置viewport的宽度和缩放比例来适配不同屏幕大小的设备。例如： ``` ,initial-scale=1.0"> ``` 2. 使用rem布局：通过设置html的字体...
HTML5屏幕适配标签设置
热门推荐
菜鸟史
06-06 1万+
开发HTML5游戏中，我们常用的一些mata标签: meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no, minimal-ui" /> 　 width: viewport 的宽度 （范围从 200 到 10,000 ，默认为 980 像素 ） height: vie
Html5应用屏幕适配方案
Nivk经验分享
12-01 4635
前言 相信现在不少人用Html5来制作手机页面，但是最大的问题就是屏幕的适配问题了。 虽然市面上有很多的移动框架可以帮助你解决不少问题，但一旦发生问题，很多人都会懵了。 本篇文章的目的就是为了让大家了解适配方案，以便解决问题。 屏幕适配的多种方案： 从上图我们可见，为iPhone5中微信打造的页面是不能直接显示到其他分辨率手机上的，否则会造成有大量空白区域或内容缺失的情况
HTML5 屏幕适配笔记
前端博客
09-03 690
常用标签 &lt;!-- 是否删除默认的苹果工具栏和菜单栏 --&gt; &lt;meta name="apple-mobile-web-app-capable" content="yes" /&gt; &lt;!-- 其他的meta设置 --&gt; &lt;!-- 启用360浏览器的极速模式(webkit) --&gt; &lt;meta name="renderer&quo
html适配web,移动 web 端屏幕适配(rem)
weixin_32327615的博客
06-05 216
前言最近整理了一下以前学习前端的笔记，发现自己对移动 web 端屏幕适配(rem)这一块并没有真正理解，只是会用。接下来，把自己的一些对移动 web 端屏幕适配(rem)的思考记录下来。rem 介绍rem 表示根元素()的 font-size 的大小。即如果根元素的 font-size 大小为 14px，则 1rem = 14pxrem 适配移动 web 端适配效果在不同尺寸的屏幕下，同一个元素的...
html界面实现大屏适配
Yi_Li_Tong_Wan_DOU的博客
11-08 558
html界面通过vw、vh实现大屏适配
H5屏幕适配方案
wsl3465205046的博客
08-10 1018
屏幕适配在现代 Web 开发中至关重要。使用响应式设计、视口单位、百分比宽度、流式布局、移动优先策略和合适的 meta 标签，你可以确保你的 H5 应用在各种设备上都能良好显示和使用。此外，借助流行的 CSS 框架和工具可以进一步简化适配过程。根据你的项目需求选择合适的方法，并结合实际测试来确保最佳用户体验。
HTML 网页移动端适配大小屏幕
开发仔XG
02-24 2820
在head里面先添加 <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1, minimum-scale=1, user-scalable=0"> 然后再添加： <!-- 小屏幕处理 --> <script> // 设置fontSiz...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值