WAP移动端页面显示，文字和内容等比缩放的实现

最新推荐文章于 2022-06-15 11:52:09 发布
最新推荐文章于 2022-06-15 11:52:09 发布
阅读量1w 收藏 13
点赞数 1
分类专栏： 从入门到放弃
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/vailook/article/details/53758889
版权 
同一个页面，在不同显示比例下如何等等比缩放而使页面不会变形
比如同一个页面下，372px 和642px显示比例下文字大小和块元素高度会随着显示的比例来等比缩放
比例始终显示协调，不用重复调试，其中一个重要的元素是将所有定义宽高的元素设置为rem




rem是一个相对大小的值，它相对于根元素<html>，
比如假设，我们设置html的字体大小的值为html｛font-size: 87.5%;｝（也就是14px）。
然后其他的字体就是将你要的值除以14得到的值；
比如iphone5主题大小是320px；换算成rem就是320/14=22.85714rem；
padding的24px也就是24/14=1.714285714285714rem，以此类推。
 
上面的14是个变量，相对于你对根元素html字体大小的设定，如果你设定的是62.5%，那除数就变成10了，对照表如右图：
用这个rem单位的好处有啥我不知道，不过如果你根元素的字体大小选62.5%，那px和rem之间的换算就是px直接除以10就得到rem了，这比em简单多了，到现在我都没搞清楚em和px之间是如何换算的。
另外rem在ie8及ie8以下的版本不支持外其他浏览器都支持，如果你要考虑ie8及一下，可以设置个px再设置个rem就可以了。



如上图，当然只有rem元素还是不够的，以下是整个过程的实现。
代码如下
<div class="header">
		css中单位px和em，rem的区别！<br>
		国内的设计师大都喜欢用px，而国外的网站大都喜欢用em和rem，那么三者有什么区别，又各自有什么优劣呢？下面给大家详细介绍下。

	</div>	


一、在head里面加入
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
在移动设备上进行网页的重构或开发，首先得搞明白的就是移动设备上的viewport了，只有明白了viewport的概念以及弄清楚了跟viewport有关的meta标签的使用，才能更好地让我们的网页适配或响应各种不同分辨率的移动设备。

二、CSS中添加代码 
html{font-size: 625%;}
	body {font-family: "Microsoft YaHei";color: #333;width: 100%;max-width: 640px;min-width: 320px;margin:0 auto;}
.header{
		height: 1rem;
		background: #ccc;
		font-size: 0.2rem;
		text-align: center;
		padding-top: 0.1rem
		
	}
移动端设置页面最大宽度640px  最小宽度320px
font-size:625% 是相对于设备默认的字体大小，那么接下来就要定义设备的默认字体大小 font-size，
三、header 中加入JAVASCRIPT 代码
<script src="http://www.meiya.org.cn/style/js/jquery-1.9.1.min.js"></script>
	<script>
	$(function  () {
		function resi() {
			var html = document.querySelector("html");
			var wW = document.body.clientWidth || document.documentElement.clientWidth;
			var maxW = 640;
			var minW = 320;
			if (wW > maxW) wW = maxW;
			var ratio = wW / minW;
			html.style.fontSize = 50 * ratio + "px"
		}
		window.addEventListener("DOMContentLoaded", function() {
			var bodys = document.querySelector("body").style;
			bodys.opacity = "1";
			bodys.filter = "alpha(opacity=100)";
			resi()
		});
		window.addEventListener("resize", resi);

	});		
	</script>	
以上代码根据设备宽度自动匹配字体大小，从而实现等比缩放的效果。





                

        

        

    




    

      

        

            

              
                
                  Young-杨
                
              
            

            

                关注
              
            

        

        

          
    
            
  • 
              
                
                
                
                
                    1
                
              
              
    点赞
    
            
    • 
            
  • 
              
                
                
                
              
              
    踩
    
            
    • 
            
  • 
              
                
                
                
                
                    13
                
              
              
    
                
    
                  
                    收藏
                  
                
    
              
    
              
    
                
    
                  觉得还不错?
                  
                    一键收藏
                  
                 
                
    
              
    
            
    • 
          
  • 
            
    
              
              
            
    
              
              
              
                    0
              
            
            
    评论
    
          
    • 
          
  • 
          
    • 
          
  • 
            
              
            
              
    
            
              
                
            
    
          
    • 
        

      

      

            

                专栏目录
          










                



	

		

			

				
					
解决页面等比缩放问题

				
			

			

				

					觉醒法师的专栏
				

				

					06-30
					
					5218
					
				

			

		

		

			
				
近些年可视化数据大屏技术早已成熟，在市场上相关技术也是五花八门；通常情况是自行开发，要不找技术比较成熟大厂定制，或者使用较成熟的低代码平台实现。技术门槛比较低，不过在数据大屏项目实施过程中会发现，需要调整屏幕分辨率，页面大小自适应，字体大小等问题；由于网页中最小字段12px，通过样式控制非常麻烦；此篇将使用CSS3新特性transform技术，来实现分辨率变化后，还可以正常显示页面。

			
		

	



                

              
                



	

		

			

				
					
css实现保持div的等宽高比例(缩放）(实用、赞）

				
			

			

				

					chelen_jak的专栏
				

				

					01-21
					
					9997
					
				

			

		

		

			
				
原文出：css实现保持div的等宽高比 - 情三 - 博客园

这篇文章主要为回答这个问题：“做响应式网页，如何让一个div的高和宽保持比例放大或是缩小？”，这里不介绍媒体查询的实现。



那么css如何实现高度height随宽度width变化保持比例不变呢？即给定可变宽度的元素，它将确保其高度以响应的方式保持成比例(即，其宽度与高度的比率保持恒定)。

下面以高宽 2:1 为例，通过2种方式来实现这种效果。



方式一：利用定位实现


.wrapper{
  position : relative.

			
		

	



                


  
              

                


	

		

			

				
					
移动端布局伸缩、设置div高度等比例缩放

				
			

			

				

					DevOps海洋的渔夫@专栏
				

				

					03-09
					
					1616
					
				

			

		

		

			
				
仅供学习，转载请注明出处








问题描述
首先写一个移动端布局的div出来看看，示例如下：







随着移动端的屏幕大小，div的布局宽度是设置100%，所以可以跟着变化。但是高度是固定写了10rem的高度，这样是无法随着宽度变化进行等比例变化的。







那么解决这个问题的关键就是，因为高度是使用rem单位设置的，只要随着屏幕的宽度变化，设置html的fo...

			
		

	





	

		

			

				
					
Flex布局

				
			

			

				

					xcxiang的博客
				

				

					03-25
					
					370
					
				

			

		

		

			
				
https://zhuanlan.zhihu.com/p/25303493
https://juejin.im/post/58e3a5a0a0bb9f0069fc16bb
http://www.ruanyifeng.com/blog/2015/07/flex-examples.html
https://juejin.im/post/5ac2329b6fb9a028bf057caf
https://...

			
		

	



		

			
		



	

		

			

				
					
rem布局：手机端页面自适应解决方案 (转载 记录)

				
			

			

				

					weixin_44070105的博客
				

				

					05-25
					
					450
					
				

			

		

		

			
				
相信很多刚开始写移动端页面的同学都要面对页面自适应的问题，当然解决方案很多，比如：百分比布局，弹性布局flex（什么是flex），也都能获得不错的效果，这里主要介绍的是本人在实践中用的最顺手最简单的布局方案——rem（什么是rem）布局


rem布局非常简单，首页你只需在页面引入这段原生js代码就可以了


    (function (doc, win) {
        var docEl = doc.documentElement,
            resizeEvt = 'ori...

			
		

	





	

		

			

				
					
PC、移动端自适应等比缩放布局方案

				
			

			

				

					11-16
				

			

		

		

			
				
### PC、移动端自适应等比缩放布局方案  随着互联网技术的发展与用户需求的变化，前端开发中的布局方式也在不断地演变。从最开始的静态布局到流式布局、自适应布局、响应式布局以及弹性布局，每种布局都有其独特的...

			
		

	





	

		

			

				
					
PHP实现图片的等比缩放和Logo水印功能示例

				
			

			

				

					10-19
				

			

		

		

			
				
在这个示例中，我们将使用GD库来实现图片的等比缩放和Logo水印功能。  1. **等比缩放**：  等比缩放的关键在于保持图片的比例不变，防止拉伸或压缩。这里使用`getimageSize()`函数获取图片的宽度 `$w` 和高度 `$h`，...

			
		

	





	

		

			

				
					
c#图片缩放图片剪切功能实现(等比缩放)

				
			

			

				

					09-04
				

			

		

		

			
				
本文将详细介绍如何在C#中实现等比缩放和图片剪切的功能，同时分享基础的图片处理知识。  首先，我们要知道等比缩放是保持图像比例进行大小调整的关键。在处理图像时，我们通常希望保持原始图像的比例，以免造成图像...

			
		

	





	

		

			

				
					
基于jquery实现等比缩放图片

				
			

			

				

					10-25
				

			

		

		

			
				
在许多应用场景中，为了保证图片在不同分辨率和尺寸的显示设备上能够完整显示，同时又不扭曲图片，需要进行等比缩放。  知识点三：图片的等比缩放实现方法 一般来说，实现图片的等比缩放有两种基本方法：一种是计算...

			
		

	





	

		

			

				
					
php和js对数据库图片进行等比缩放示例

				
			

			

				

					10-26
				

			

		

		

			
				
最后，将缩放后的尺寸应用到`objImg`对象的`width`和`height`属性上，从而实现图片的等比缩放。  在PHP方面，通过使用PHP类`ImgSF`中的`make_img`函数来完成图片的等比缩放工作。由于PHP操作的是服务器端资源，函数...

			
		

	





	

		

			

				
					
移动端字体适配

				
			

			

				

					weixin_41184962的博客
				

				

					06-15
					
					2082
					
				

			

		

		

			
				
1. 使用 vw 和 rem 实现移动端适配rem 是 根元素 html字体大小的倍数，只跟根元素字体大小有关。如果浏览器默认字体是 16px (根元素html的font-size = 16px)，那 1rem = 16px;这样如果屏幕改变时，只需要修改html元素的font-size 就可以实现等比适配，但是貌似实际开发中并不需要字体等比适配，基本移动端字体都是 16px 或者 14px。 (也有可能是我见识少)vw 是把屏幕分成 多少等份，100vw就是 把屏幕分成 100等份；（怎么感觉跟 %一样，

			
		

	





	

		

			

				
					
等比缩放之自适应神器——css3的rem

				
			

			

				

					weixin_30341735的博客
				

				

					11-21
					
					527
					
				

			

		

		

			
				
1.rem简介
 rem是CSS3中新增加的一个单位值，他和em单位一样，都是一个相对单位。不同的是em是相对于元素的父元素的font-size进行计算；rem是相对于根元素html的font-size进行计算。这样一来rem就绕开了复杂的层级关系，实现了类似于em单位的功能。

2.rem兼容性

  rem是CSS3新引进来的一个度量单位，大家心里肯定会觉得心灰意冷呀，...

			
		

	





	

		

			

				
					
移动端开发vw+rem布局，即等比缩放布局（什么是vw?如何设置根元素html的字体大小？如何换算vw单位？文末：移动端开发步骤详解链接）

				
			

			

				

					小福气的博客
				

				

					08-05
					
					1285
					
				

			

		

		

			
				
1 什么是vw?


vw是一种视窗单位，也是相对单位。相对于视口的宽度，视口被均分为100单位的vw。能够实现页面内的字体大小跟随视口的大小而改变。

1vw 视口宽度的1%

100vw 视口宽度的100%

1vh 视口高度的1%

100vh 视口高度的100%


2为什么要将根元素html字体大小设置为100px？


是为了方便计算。

    我们都知道，根元素默认的字体大小是12px,即 html{...

			
		

	





	

		

			

				
					
body 设置适应缩放_前端开发分辨率自适应

				
			

			

				

					weixin_30662937的博客
				

				

					02-06
					
					2478
					
				

			

		

		

			
				
不管是做Web前端开发的，还是做移动端H5开发的，都会受到全屏分辨率自适应的困扰，下面我们就分享一下CSS解决分辨率自适应的几种方法。一、meta标签1、H5移动端页面自适应普遍使用的方法，理论上讲使用这个标签是可以适应所有尺寸的屏幕的，但是各设备对该标签的解释方式及支持程度不同造成了不能兼容所有浏览器或系统。2、viewport(1)viewport 是用户网页的可视区域。翻译为中文可...

			
		

	





	

		

			

				
					
网页按照比例缩放 适配 移动端

				
			

			

				

					q515656712的博客
				

				

					11-29
					
					773
					
				

			

		

		

			
				
例子


<!DOCTYPE html>
<html>
<head>
	<title>网页按照比例缩放</title>
	<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
	<style ty...

			
		

	





	

		

			

				
					
H5页面移动端背景图以及文字适配方法

				
			

			

				

					wxxmagic的博客
				

				

					01-07
					
					3728
					
				

			

		

		

			
				
H5页面适配的方法
背景的适配
给页面设置背景图，因为适配不同的设备（设备屏幕分辨率不同），所以再给背景图宽高的时候不能全部给100%
背景图（ui设计图）的比例是固定的，这里举例750px*1468px,如果给背景图设置为
background-size: 100% 100%;

那么背景图就会完全填充到整个屏幕，当屏幕的比例不同于你设计图的比例的时候，你的背景图就会有拉伸现象（背景变形）
为了让背景不变形有两种方法
固定宽填充整个屏幕，让高自适应
background-size: 100% auto;


			
		

	





	

		

			

				
					
jquery 控制字体放大缩小

				
			

			

				

					sinat_31016743的博客
				

				

					12-26
					
					6028
					
				

			

		

		

			
				
上周结了一个学校门户网站前端页面制作的工作（改版又改版，修改又修改），有很多js效果是我是利用jquery来实现的，例如新闻正文字体放大缩小效果，比较简单，在这里提出来做个小小demo。（写几句又多一篇贴啦，经过别笑话。）




JS如下：
$(function () {
            $(".f-add").click(function () {

			
		

	





	

		

			

				
					
div元素按比例缩放的实现方法

				
			

			

				

					iteye_16353的博客
				

				

					09-08
					
					9607
					
				

			

		

		

			
				
[align=center][size=large]div元素按比例缩放的实现方法[/size][/align]
        某些场景下，窗口宽度缩放时，使得元素宽度自适应的同时，保证每个元素的宽高比例不变。
[b]1.1利用CSS属性实现——padding-bottom属性[/b]
        padding-bottom 有一个特性是当它的值是百分比形式时，百分比的基数是其所在元...

			
		

	





	

		

			

				
					
html 等比缩放页面

				
			

			

				

					BDawn的专栏
				

				

					03-11
					
					8788
					
				

			

		

		

			
				
根据浏览器窗口等比缩放页面
实现思路

通过css的transform scale属性对页面body元素进行缩放
缩放比例为实际窗口尺寸/设置的body像素尺寸，选择(窗口宽/body宽)和(窗口高/body高)中较小的一个
body缩放之后，位置相对于窗口出现偏移，许需要调整body的margin

代码实现
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8"/>
    &lt

			
		

	





	

		

			

				
					
echarts树形图所有内容等比缩放

					
最新发布

				
			

			

				

					06-10
				

			

		

		

			
				
要实现echarts树形图所有内容等比缩放，可以通过以下步骤实现：  1.设置echarts容器的宽高比为1:1，可以使用CSS样式设置容器的宽高比。  2.使用echarts提供的resize方法，监听窗口大小变化事件，当窗口大小发生变化...

			
		

	



              




          




        



    





    



      

      

        
      

      





	

		评论	
	

	
	




  

    

      添加红包
      
    

    

      

        
        

          
          
        

        
请填写红包祝福语或标题

      

      

        
        

          
          个
        

        
红包个数最小为10个

      

      

        
        

          
          元
        

        
红包金额最低5元

      

      

        
        

          当前余额3.43元
          前往充值 >
        

      

      

        

          需支付：10.00元
        

        
        
      

    

  





  

    
    
  

  

    
    
  








  

    

      

        

          

            
            
成就一亿技术人!

          

          

        

        

          

          

            领取后你会自动成为博主和红包主的粉丝
            规则
          

        

      

      

        

          

            
              
            
            

              
hope_wisdom
 发出的红包
            

          

        

        

          

          

          

        

      

    

    

  



      
      

      
实付元

      
使用余额支付

      

        

          

            
            点击重新获取
          

        

        
扫码支付

      

      

        
          
            
          
          
        
      

      

        
        钱包余额
          0
          

            
            

              

                
抵扣说明：

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

              

            

          

      

      余额充值