css移动页面使用rem

最新推荐文章于 2020-08-11 10:41:29 发布
最新推荐文章于 2020-08-11 10:41:29 发布
阅读量366 收藏
点赞数
分类专栏： web前端开发 css相关 文章标签： css rem
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq736150416/article/details/52859713
版权

这个rem我这会才搞明白，查了好几个资料，又是计算公式之类的，看的都晕掉了大哭

rem是以fontsize为基准的  如果html的fontsize设置为16px  就相当于设定了1em=16px   比如你的一个div设置为 32px   ,那就是2rem

一般用js来：

<html lang="zh-CN" lang="zh-CN" class="no-js" id="html-layout">
<script>
    $(window).resize(function(){
        var p=$(window).width()/750;//设计稿宽度是750 
        $('#html-layout').css('font-size',p*30);
    }).resize();
</script>

 

样式使用less预编译的：
 

.fz(@fz:12px){
  font-size: @fz/30;
}
.foot_nav {
  .fz(34rem);
}

 

 


                

        

        

    




    

      

        

            

              
                
                  xlb_123
                
              
            

            

                关注
              
            

        

        

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

      

      

            

                专栏目录
          










                



	

		

			

				
					
CSS中px em rem区别与使用

				
			

			

				

					12-09
				

			

		

		

			
				
在CSS布局和样式设计中，字体大小的设置是非常关键的一部分，通常我们会使用px、em或rem作为单位。这些单位各有特点，适用于不同的场景。下面将详细介绍它们的区别以及使用策略。  首先，px（像素）是最常见的长度...

			
		

	



                

              
                



	

		

			

				
					
使用CSS3的rem属性制作响应式页面布局的要点解析

				
			

			

				

					09-27
				

			

		

		

			
				
使用CSS3的rem属性制作响应式页面布局的关键在于理解rem单位的本质和其在不同屏幕尺寸下的动态调整。rem（root em）单位是一个相对单位，它表示元素的尺寸相对于根元素（通常是html）的字体大小。这使得rem成为构建...

			
		

	



                


  
              

                


	

		

			

				
					
让px单位自动转换为rem的方法

				
			

			

				

					weixin_30814329的博客
				

				

					12-19
					
					1121
					
				

			

		

		

			
				
开发工具：  编辑器：vscode;  css预处理器：less;（无具体要求）；步骤： 1. vscode安装cssrem插件； 2. 修改css插件的默认配置，其默认转换px为16px, 需要改为当前项目设计的1rem所对应的px，vscode插件的默认安装目录一般为 C:\Users\用户名\.vscode\extensions；找到 cipchk.cssrem-0.0.3 ...

			
		

	





	

		

			

				
					
傻瓜式移动端适配——媒体查询和rem

				
			

			

				

					小菜鸡程序媛的挣扎史
				

				

					11-13
					
					598
					
				

			

		

		

			
				
一、当只有两套设计图的情况下，一套pc 一套移动端

（一般为了用户体验更好，不会只有一套设计图）



1、禁止移动端缩放，且让屏幕layout viewpoint 横向css像素=屏幕横向的dips（定值）


<meta name="viewport" content="width=device-width,initial-scale=1.0, minimun-scale=1.0,m...

			
		

	



		

			
		



	

		

			

				
					
项目开发之rem加媒体查询实现移动端布局

				
			

			

				

					郭蕾蕾  努力的包子
				

				

					11-06
					
					9452
					
				

			

		

		

			
				
这次小编将要拿一个实际开发来将布局，首先我们拿到美工给的图一般会分为两种格式一种是640的图一种是750的图这两种图其实的效果是一样的只不过给,我们得到的测量数据不同，所以其他都是一样的，这里我们就拿640的来讲解。
        我们将屏幕分为20份（这里随便只不过20份比较好计算），然后我们可已经640的屏幕分为20份每一份是32px;所以我们在计算的时候例如：获得一个尺寸为 28 转化为

			
		

	





	

		

			

				
					
从设计图到CSS：rem+viewport+媒体查询+Sass

				
			

			

				

					weixin_34295316的博客
				

				

					05-20
					
					189
					
				

			

		

		

			
				
根据UI图对移动端的h5页面做样式重构，是前端工程师的本职工作，看似简单，不过想做好却并不容易。下面总结一下其中要点。
rem
rem是一种相对长度单位，参考的基准是<html>标签定义的font-size。比如：
html {
    font-size: 16px;
}
.intro {
    font-size: 1.2rem;
    margin-top: 0.2rem;
...

			
		

	





	

		

			

				
					
CSSREM插件

				
			

			

				

					weixin_34043301的博客
				

				

					11-21
					
					509
					
				

			

		

		

			
				
CSSREM
一个CSS的px值转rem值的Sublime Text 3自动完成插件。
插件效果如下：

 
安装

下载本项目，比如：git clone https://github.com/flashlizi/cssrem
进入packages目录：Sublime Text -&gt; Preferences -&gt; Browse Packages...
复制下载的css...

			
		

	





	

		

			

				
					
vue中使用rem布局代码详解

				
			

			

				

					12-13
				

			

		

		

			
				
在Vue.js项目中，使用rem布局...不过，需要注意的是，使用rem布局时，应尽量避免在CSS中使用固定像素值，以保持灵活性。同时，对于某些特定的UI组件，可能还需要结合媒体查询（media queries）等技术进行进一步的优化。

			
		

	





	

		

			

				
					
vue使用rem实现 移动端屏幕适配

				
			

			

				

					12-01
				

			

		

		

			
				
要想移动端适配 并使用 rem 您需要先看这篇文章，配置好less :right_arrow_selector: 在vue 中使用 less，就可以使用rem了 如果项目已经开发的差不多了，没有用到rem 又要使用rem，您用这招。 postcss-pxtorem：...

			
		

	





	

		

			

				
					
移动web开发-rem布局案例源码，html+css素材

				
			

			

				

					02-16
				

			

		

		

			
				
总的来说，这个“移动web开发-rem布局案例”涵盖了移动Web开发的核心技术，包括REM布局、响应式设计、HTML5语义化标签和CSS3的Flexbox/Grid布局。通过深入学习和实践这些知识点，开发者可以创建出更加适应各种设备和...

			
		

	





	

		

			

				
					
CSS3 媒体查询+rem移动端布局

				
			

			

				

					weixin_43981560的博客
				

				

					06-02
					
					356
					
				

			

		

		

			
				
弹性盒子和媒体查询


什么是媒体查询？
媒体查询可以让我们根据设备显示器的特性（如视口宽度、屏幕比例、设备方向：横向或是纵向）为其设定CSS样式，媒体查询由媒体类型和一个或多个检测媒体特性的条件表达式组。	
媒体查询中可用于检测的媒体特性有width、height和color。使用媒体查询，可以在不改变页面内容的情况下，为特定的一些输出设备定制显示效果。


媒体查询语法


语法一：
       @media mediatetype and | not |only (media feature){
 

			
		

	





	

		

			

				
					
sublime px转rem的方法【亲测有效】

				
			

			

				

					weixin_30321709的博客
				

				

					08-27
					
					264
					
				

			

		

		

			
				
在开发手机网站的时候，我们经常会用到rem来作为单位，但是手动转rem太麻烦了，那么怎么办呢？sublime安装cssrem来进行快捷操作。
安装过程：
第一步：去git上克隆

https://github.com/flashlizi/cssrem

第二步：进入packages目录：Sublime Text -> Preferences -> Browse P...

			
		

	





	

		

			

				
					
【移动端】使用REM进行的响应式布局

				
			

			

				

					幻梦
				

				

					11-16
					
					2695
					
				

			

		

		

			
				
工具ViewtoREM：PX转换到REM（自动预处理）REM的定义： 
rem是相对于根元素<html>来设置字体大小的，这样就意味着，我们只需要在根元素确定一个参考值，在根元素中设置多大的字体，这完全可以根据您自己的需求。REM与EM、PX的区别： 
PX：像素，比较精确的单位，但不好做响应式布局 
EM：以父节点font-size大小为参考点，标准不统一，容易造成混乱REM支持的浏览器： 
支持

			
		

	





	

		

			

				
					
移动端页面使用rem来做适配

				
			

			

				

					冰雪为融的博客
				

				

					05-25
					
					362
					
				

			

		

		

			
				
rem介绍rem（font size of the root element）是指相对于根元素（即html元素）的字体大小的单位。假设根元素的字体大小是10px, 则5rem的大小为 5*10=50px,例如html{
    font-size: 10px;
}
p{
    width: 2rem; /* 2*10 = 20px;*/
    margin: 1rem;
}
rem来做适配以前...

			
		

	





	

		

			

				
					
媒体查询（黑马笔记）-移动端布局rem

				
			

			

				

					weixin_42349568的博客
				

				

					08-11
					
					577
					
				

			

		

		

			
				
一，了解px，em,rem的区别

px:像素
em：长度单位，基准是父元素的font-size值大小。
rem:长度单位，基准是html的font-size值大小。

二，媒体查询
一旦采用rem布局， 屏幕上的元素大小就会和html的字体大小相联系起来，也就是说，html的字体一变化，全局元素就会随之变化。
但是存在一个问题，屏幕不同的情况下，如何去变化这个字体大小，从而引发全局重新渲染呢？
这就要引入媒体查询的概念：
媒体查询可以根据不同的屏幕尺寸，选用不同的样式！
语法规范如下：




例如：当屏

			
		

	





	

		

			

				
					
css rem的换算

				
			

			

				

					qq_43889848的博客
				

				

					06-03
					
					2017
					
				

			

		

		

			
				
为什么要使用rem
之前有些适配做法，是通过js动态计算viewport的缩放值（initial-scale）。

例如以屏幕320像素为基准，设置1，那屏幕375像素就是375/320=1.18以此类推。

但直接这样强制页面缩放过于粗暴，会导致页面图片文字失真模糊。
Px是相对固定单位，字号大小直接被定死，所以用户无法根据自己设置的浏览器字号而缩放，em和rem虽然都是相对单位，但em是相对于它的父元素的font-size，页面层级越深，em的换算就越复杂，而rem是直接相对于根元素，这就避开了很多层级

			
		

	





	

		

			

				
					
移动端自适应之媒体查询，em，rem

				
			

			

				

					xiaoqingpang的博客
				

				

					01-03
					
					1465
					
				

			

		

		

			
				
1.响应式页面的实现（媒体查询和bootstrap的栅格布局）
媒体查询针对不同的屏幕尺寸设置不同的样式

html>
lang="en">

    charset="UTF-8">
    name="viewport" content="width=device-width,height=device-height, user-scalable=no,initial-scale=1, 

			
		

	





	

		

			

				
					
sublime-cssrem-安装与使用

				
			

			

				

					pyhui的技术博客
				

				

					07-07
					
					1204
					
				

			

		

		

			
				
CSSREM
一个CSS的px值转rem值的Sublime Text 3自动完成插件。
效果图
https://github.com/flashlizi/cssrem/raw/master/cssrem.gif
安装
下载本项目，比如：git clone https://github.com/flashlizi/cssrem
进入packages目录：Sublime Text -> Pref...

			
		

	





	

		

			

				
					
媒体查询_REM

				
			

			

				

					
				

				

					02-28
					
					1646
					
				

			

		

		

			
				
document.documentElement.style.fontSize = document.documentElement.clientWidth / 750 * 100 + 'px';

H5新增的语义标签



    header>header>  div id="header">div>
        nav>nav>  div id="nav">div>

			
		

	





	

		

			

				
					
pc端使用 lib-flexible 和 postcss-px2rem

					
最新发布

				
			

			

				

					09-09
				

			

		

		

			
				
关于在PC端使用lib-flexible和postcss-px2rem，我可以给你一些简要的说明。  lib-flexible是一个用于移动端适配的库，它可以根据设备的屏幕大小动态调整HTML的字体大小，以实现页面元素的自适应。在PC端使用lib-...

			
		

	



              



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

  

      
    
          
  • 
              
    
                  
                  
              
    
              
    非常没帮助
    
          
    • 
          
  • 
              
    
                  
                  
              
    
              
    没帮助
    
          
    • 
          
  • 
              
    
                  
                  
              
    
              
    一般
    
          
    • 
          
  • 
              
    
                  
                  
              
    
              
    有帮助
    
          
    • 
          
  • 
              
    
                  
                  
              
    
              
    非常有帮助
    
          
    • 
      

      

      

          
          提交
      

      

  




          




        



    





    



      

      

        
      

      





	

		评论	
	

	
	




  

    

      添加红包
      
    

    

      

        
        

          
          
        

        
请填写红包祝福语或标题

      

      

        
        

          
          个
        

        
红包个数最小为10个

      

      

        
        

          
          元
        

        
红包金额最低5元

      

      

        
        

          当前余额3.43元
          前往充值 >
        

      

      

        

          需支付：10.00元
        

        
        
      

    

  





  

    
    
  

  

    
    
  








  

    

      

        

          

            
            
成就一亿技术人!

          

          

        

        

          

          

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

        

      

      

        

          

            
              
            
            

              
hope_wisdom
 发出的红包
            

          

        

        

          

          

          

        

      

    

    

  



      
      

      
实付元

      
使用余额支付

      

        

          

            
            点击重新获取
          

        

        
扫码支付

      

      

        
          
            
          
          
        
      

      

        
        钱包余额
          0
          

            
            

              

                
抵扣说明：

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

              

            

          

      

      余额充值