html 移动端的屏幕适配问题

最新推荐文章于 2022-07-28 14:21:14 发布
最新推荐文章于 2022-07-28 14:21:14 发布
阅读量1.6k 收藏 10
点赞数 1
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/guoqingru0311/article/details/119022927
版权

移动端的屏幕适配问题

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

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);
})();

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

郭庆汝
关注
  • 1
    点赞
  • 踩
  • 10
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
HTML5 移动页面自适应手机屏幕四类方法总结
09-27
主要介绍了HTML5 移动页面自适应手机屏幕四类方法总结,非常具有实用价值，需要的朋友可以参考下
HTML屏幕适配
huyishero的博客
10-26 498
经过学习，现在主流的屏幕适配的做法有，流式布局、响应式布局、自适应布局、静态布局。 1.流式布局----指布局从上到下，像水流一样顺序布局，一般宽度使用百分比，高度使用固定值；优点是，如果设备的屏幕宽度变化了，可以自动适应，缺陷是由于宽度是自适应的，高度是固定的，所以会导致比例失衡，只有在部分开发预设宽度下会效果较好。流式就是当宽度大于多少时怎么展示，小于多少时怎么展示，而且展示的方式向
Html 屏幕适配
开心的去学习->研究
02-05 252
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 2413
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; 每个属性的详细介绍： 属性...
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
vue移动端html5页面根据屏幕适配的四种解决方法
10-17
在vue移动端h5页面当中，其中适配是经常会遇到的问题，这块主要有四个方法可以适用。这篇文章主要介绍了vue移动端h5页面根据屏幕适配的四种方案 ,需要的朋友可以参考下
CSS像素以及移动端不同屏幕适配问题解决
11-21
像素 分辨率 我们通常所说的显示器分辨率... 也就是CSS世界中的px相同，相同物理尺寸的屏幕显示效果就是相同的 那么在实际屏幕显示的时候他们之间都有神马关系呢？ 如下图 当我们在网页上设置一个元素的css像素（widt
移动端网页/网页适配
05-19
网页适配，应对各种屏幕大小
html5、移动端、mui+app尺寸适配、屏幕适配、屏幕自适应插件，解决不同手机尺寸的手机适配问题
06-10
html5+app、移动端、mui+app尺寸适配、屏幕适配、屏幕自适应插件，解决不同手机尺寸的手机适配问题
html5在移动端的屏幕适应问题示例探讨
12-14
Html5 曾经是最最炙手可热的技术，移动端也因为html5技术的加入变得更加变通一些，人人都喜欢“Write once，run ...好了，说了这么多废话，现在开始进入主题，android的适配问题是最让android程序员头疼的问题，大家为
Html5应用屏幕适配方案
Nivk经验分享
12-01 4545
前言 相信现在不少人用Html5来制作手机页面，但是最大的问题就是屏幕的适配问题了。 虽然市面上有很多的移动框架可以帮助你解决不少问题，但一旦发生问题，很多人都会懵了。 本篇文章的目的就是为了让大家了解适配方案，以便解决问题。 屏幕适配的多种方案： 从上图我们可见，为iPhone5中微信打造的页面是不能直接显示到其他分辨率手机上的，否则会造成有大量空白区域或内容缺失的情况
响应式和页面自适应自动适应屏幕大小开发精要
milijiangjun的博客
11-11 2545
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-03 652
常用标签 &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 189
前言最近整理了一下以前学习前端的笔记，发现自己对移动 web 端屏幕适配(rem)这一块并没有真正理解，只是会用。接下来，把自己的一些对移动 web 端屏幕适配(rem)的思考记录下来。rem 介绍rem 表示根元素()的 font-size 的大小。即如果根元素的 font-size 大小为 14px，则 1rem = 14pxrem 适配移动 web 端适配效果在不同尺寸的屏幕下，同一个元素的...
HTML 网页移动端适配大小屏幕
开发仔XG
02-24 2756
在head里面先添加 <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1, minimum-scale=1, user-scalable=0"> 然后再添加： <!-- 小屏幕处理 --> <script> // 设置fontSiz...
html字体自适应屏幕大小
qq_44183995的博客
07-28 1466
13代表字体现在的大小。
HTML移动端适配
许诺的博客
03-02 4016
1.手机端属于说明 ​ 物理像素：屏幕出厂就确定的 ​ css像素：；逻辑像素，css里面的px单位 ​ dpr设备像素比：物理像素/逻辑像素 ​ 理想视口的设置： <meta name="viewport" content="width=device-width， initial-scale=1.0"> 2.响应式 ​ 一套代码，能够适配多个平台，不论大小屏幕尺寸或者设备类型都能显示比较正常的效果 原理:利用媒体查询 @media 3.移动端适配 ​ 1.使用百分比。 ​ 2.使用r
html自动适应屏幕分辨率,css如何设置适配不同分辨率屏幕？
weixin_33534991的博客
05-30 1万+
css如何设置适配不同分辨率屏幕？下面本篇文章给大家介绍一下。有一定的参考价值，有需要的朋友可以参考一下，希望对大家有所帮助。css如何设置适配不同分辨率屏幕？在使用div+css网页布局时，可以使用@media来针对不同的分辨率设置不同的样式。在网页制作中，利用@media screen实现网页布局的自适应，匹配不同访问设备。这样无需插件和独立的手机主题，对移动设备友好，能够适应各种窗口大小。只...
html页面适配兼容问题,html页面适配兼容问题
weixin_30844865的博客
06-05 1080
1.背景：许多情况如果开发的页面只是内部的成员自己应用，则只要在一种浏览器中显示功能正常即可；如果开发的网站是面向用户的，则要考虑到用户的使用的浏览器的不同，则要做到主流的浏览器中，页面的功能均可以正常使用。这是就会涉及到不同浏览器的适配问题，首先要考虑到目前浏览器的解析内核的区别，目前浏览器内核主要分为两大类，chrome和IE。像QQ浏览器、Firefox等与IE的解析内核相同，而360、sa...
如何实现移动端屏幕适配
最新发布
06-07
移动端屏幕适配可以通过以下几种方式来实现： 1. 使用viewport标签：通过设置viewport的宽度和缩放比例来适配不同屏幕大小的设备。例如： ``` <meta name="viewport" content="width=device-width,initial-scale=1.0"> ``` 2. 使用rem布局：通过设置html的字体大小为屏幕宽度的比例来实现页面元素的缩放。例如： ``` html { font-size: calc(100vw / 设计稿宽度 * 比例); } ``` 3. 使用flexible.js：通过动态设置viewport的缩放比例和rem的基准值来实现页面元素的缩放。例如： ``` <script src="https://cdn.bootcss.com/amfe-flexible/2.2.1/index.js"></script> ``` 以上三种方法都可以实现移动端屏幕适配，具体使用哪种方法取决于项目需求和开发习惯。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值