移动端始终横屏及rem 适配

最新推荐文章于 2024-05-17 17:40:41 发布
最新推荐文章于 2024-05-17 17:40:41 发布
阅读量1.7k 收藏 1
点赞数
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/snowskyBeautiful/article/details/75023590
本文介绍了一种通过CSS和JavaScript实现的移动端始终横屏显示的方法，并结合REM单位进行页面布局适配的技术方案。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >


移动端始终横屏及rem 适配

      这几天做一个项目需要始终横屏，然而找了许多资料，看到H5网页感觉并不能直接控制始终横屏，而是需要使用css3配合JS控制横屏，后面因为适配原因用到rem，于是为了方便和学习，在这结合资料记一个学习笔记。
下面上demo：
css代码：

html{color:#000;background:#FFF}body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td{margin:0;padding:0}table{border-collapse:collapse;border-spacing:0}fieldset,img{border:0}address,caption,cite,code,dfn,em,strong,th,var{font-style:normal;font-weight:normal}ol,ul{list-style:none}caption,th{text-align:left}h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal}q:before,q:after{content:''}abbr,acronym{border:0;font-variant:normal}sup{vertical-align:text-top}sub{vertical-align:text-bottom}input,textarea,select{font-family:inherit;font-size:inherit;font-weight:inherit;*font-size:100%}legend{color:#000}#yui3-css-stamp.cssreset{display:none}
html{-webkit-tap-highlight-color:rgba(255,255,255,0);
-webkit-appearance:none;
-webkit-transform:translate3d(0, 0, 0);}
img{ width: 100%; display: block;}

/* main css */
body{ width: 100%; height: 100%; position: relative; left:0; top: 0; background: #000; overflow: hidden;}
#wrap{ height: 100%; position: absolute; left: 50%; top:50%; overflow: hidden;}
.content{ width: 1000px; height: 640px; color: #000; position: absolute; left:50%; top:50%;}
.pageWrap{ width: 100%; height: 100%; position: absolute; overflow: hidden; left: 0; top:0;transform: translate3d(100%, 0, 0); -webkit-transform: translate3d(100%, 0, 0);}
.pageWrap{ background: #42a8fe url(../img/mzBg.png) no-repeat center bottom; background-size:cover; transform: translate3d(0, 0, 0); -webkit-transform: translate3d(0, 0, 0);}


html代码：
rel="stylesheet" href="css/main1.css"> 横屏测试

测试的内容11111111111
js代码：
 1.横屏 
var wrap = $('#wrap');

var ww = window.innerWidth;
var wh = window.innerHeight;
var sec = $('.pageWrap'),
	canswipe = ww*0.1,
	hadDown = false;

$('body').css({
	'width':ww+'px',
	'height':wh+'px'
});
changeScene();



window.onresize = function(){
	canswipe = ww*0.1;
	//调整画布的位置和大小
	changeScene();
}

function changeScene(){
	var iniW = 1000,
		iniH = 640,
		tarW = 0,
		tarH = 0;
	ww = window.innerWidth;
	wh = window.innerHeight;

	
	if(ww > wh){		//如果浏览器的宽度大于高度，说明是横屏的，画布的宽度 == 浏览器的宽度
		console.log('浏览器的宽度大于高度');
		tarW = ww;
		tarH = tarW*iniH/iniW;
		$('body').css({
			'width':ww+'px',
			'height':wh+'px'
		});

		wrap.css({
			'width':ww + 'px',
			'height':wh + 'px',
			'transform':'translate3d(-50%,-50%,0)',
			'-webkit-transform':'translate3d(-50%,-50%,0)'
		});
		

	}else if(ww <= wh){	//如果浏览器的宽度小于高度，说明是竖的，画布的宽度 == 浏览器的高度
		console.log('浏览器的宽度小于高度');
		tarW = wh;
		tarH = tarW*iniH/iniW;

		$('body').css({
			'width':ww+'px',
			'height':wh+'px'
		});


		wrap.css({
			'width':wh + 'px',
			'height':ww + 'px',
			'transform':'translate3d(-50%,-50%,0) rotate(90deg)',
			'-webkit-transform':'translate3d(-50%,-50%,0) rotate(90deg)'
		});

		
	}

}


















 2.rem适配

 
(function (doc, win) {
var docEl = doc.documentElement,
    resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
    recalc = function () {
    	if(docEl.clientWidth>docEl.clientHeight){
    		var clientWidth = docEl.clientHeight;
    	}else{
    		var clientWidth = docEl.clientWidth;
    	}
//    var clientWidth = docEl.clientWidth;
      if (!clientWidth) return;
      docEl.style.fontSize = 100 * (clientWidth / 750) + 'px';
    };
if (!doc.addEventListener) return;
win.addEventListener(resizeEvt, recalc, false);
doc.addEventListener('DOMContentLoaded', recalc, false);
})(document, window);









以上就是这些内容了。



                

        

    

    
  



    



                



	

		

			

				
					
移动端rem适配（大屏，ipad，移动端）

				
			

			

				

					qq_14810897的博客
				

				

					12-30
					
					781
					
				

			

		

		

			
				
重新运行项目 恭喜你，全部的px转成了rem。第一步：npm i postcss-px-to-viewport。第三步：复制代码到 postcss.config.js 文件里。如果 是想在项目使用px   项目运行以后 全部px转rem。使用postcss-px-to-viewport 插件。第二步：创建 postcss.config.js。

			
		

	



                

            
              



	

		

			

				
					
js简单的移动端横竖屏适配

				
			

			

				

					start_sea的博客
				

				

					01-20
					
					3086
					
				

			

		

		

			
				
js简单的移动端横竖屏适配
1、先判断处于横屏还是竖屏状态：
简单的判断方式（不是很严谨）：
竖屏： 宽度 < 高度；
横屏：宽度 > 高度；
function getWandH() {
  let W =  document.documentElement.clientWidth || document.body.clientWidth;
  let H =  document.documentElement.clientHeight || document.body.clientHeight

			
		

	



              


  
              

                


	

		

			

				
					
关于 rem在移动端横屏竖屏的适配问题

				
			

			

				

					Amy_cloud的博客
				

				

					08-27
					
					2293
					
				

			

		

		

			
				
function setRem(){
    var is_horizontal = 1, remNum = 13.34, c_width;
    if(request('is_horizontal')){
        is_horizontal = request('is_horizontal');
    }
    if(is_horizontal == 0){
        rem...

			
		

	





	

		

			

				
					
移动端rem布局js代码，横竖屏适配

				
			

			

				

					baozisss的博客
				

				

					10-11
					
					2596
					
				

			

		

		

			
				
最开始做移动端项目的时候，页面适配并没有考虑横屏的情况。后续因为手机开启可以旋转状态，整体布局出现了问题。

所以对适配作出了相应调整：


detectOrient();
window.onresize = function(){
	detectOrient();
};
//判断横屏竖屏
function detectOrient() {
	var width = document.docume...

			
		

	



		

			
		



	

		

			

				
					
移动端rem使用及高清适配

				
			

			

				

					Michael_lzg的博客
				

				

					03-11
					
					712
					
				

			

		

		

			
				
一、相关概念

rem（fontsizeoftherootelement）是指相对于根元素(html)的字体大小的单位。简单的说它就是一个相对单位。em（fontsizeoftheelement）是指相对于父元素的字体大小的单位。它们之间其实很相似，只不过一个计算的规则是依赖根元素一个是依赖父元素计算。

设备物理像素：通俗的讲设备屏幕有多少个可以闪烁的点 是一个具体的概念 比如...

			
		

	





	

		

			

				
					
移动端rem几种适配方案 + postcss-pxtorem

				
			

			

				

					weixin_44216637的博客
				

				

					05-17
					
					1280
					
				

			

		

		

			
				
rem 适配

			
		

	





	

		

			

				
					
静态布局、自适应布局、流式布局、响应式布局、弹性布局等的概念和区别

				
			

			

				

					weixin_33936401的博客
				

				

					06-22
					
					4893
					
				

			

		

		

			
				
一、静态布局（Static Layout）即传统Web设计，网页上的所有元素的尺寸一律使用px作为单位。
1、布局特点：不管浏览器尺寸具体是多少，网页布局始终按照最初写代码时的布局来显示。常规的pc的网站都是静态（定宽度）布局的，也就是设置了min-width，这样的话，如果小于这个宽度就会出现滚动条，如果大于这个宽度则内容居中外加背景，这种设计常见与pc端。2、设计方法：　　PC：居中...

			
		

	





	

		

			

				
					
一次讲清移动端适配解决方案-rem和vw.docx

				
			

			

				

					10-26
				

			

		

		

			
				
### 移动端适配解决方案：rem与vw详解  #### 一、引言  随着移动互联网的迅速发展，用户越来越依赖于移动设备访问网站或应用。为了提供良好的用户体验，前端开发者需要确保页面能够适应不同尺寸的屏幕。在众多适配...

			
		

	





	

		

			

				
					
移动Web开发实战-横竖屏适配

				
			

			

				

					前端向朔
				

				

					03-24
					
					5739
					
				

			

		

		

			
				
概述

在我们平时的移动Web页面开发过程中，经常会遇到需要横竖屏处理的情况。一般情况下我会项目实际情况，比如页面一般打开的情景是横屏还是竖屏，项目是否需要增加横竖屏适配，页面结构是否复杂等。



情景一

写好默认横屏页面，竖屏切换时显示提示结构 


CSS媒体查询



//横屏
@media (orientation: landscape){
    //显示提示结构
}
//@medi...

			
		

	





	

		

			

				
					
移动端rem布局与高清适配

				
			

			

				

					03-15
				

			

		

		

			
				
移动端rem布局与高清适配的知识点非常丰富，包括屏幕尺寸、像素、PPI、Retina屏幕特性、逻辑像素与物理像素、devicePixelRatio、viewport等概念，以及移动端1px问题的解决方案和对flexiable的改良。以下是对这些知识...

			
		

	





	

		

			

				
					
移动端适配

				
			

			

				

					wzstd的博客
				

				

					10-22
					
					900
					
				

			

		

		

			
				
移动端适配
视口viewport：
<meta name="viewport" content="width=device-width, initial-scale=1.0,user-scalable=0,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0">

<meta>标签中定义了一些元数据信息，通过设置<meta name = "viewport">，提供有关 视口初始大小 的信息，供移动设备 使用。属性值为

			
		

	





	

		

			

				
					
移动端rem横竖屏的适配以及华为等机型rem失效的问题

				
			

			

				

					Leo_xian的博客
				

				

					10-11
					
					2738
					
				

			

		

		

			
				
横竖屏的适配
平时在做移动端的适配时，会经常用到rem单位来适配屏幕，大多数都是竖屏的情况，正常都能满足我们的需求。
但是最近遇到了一个h5的小项目，是需要固定横屏，之前的js只是对竖屏进行了适配，横屏的时候由于宽高比例的转换，计算rem的算法也需要稍微改进一下，以750px的设计稿为例：
(function (doc, win) {
			var docEl = doc.documentElem...

			
		

	





	

		

			

				
					
移动端适配rem

				
			

			

				

					lgd1917的博客
				

				

					04-10
					
					363
					
				

			

		

		

			
				
认识移动端

做适配方案之前先认识下移动端，熟悉移动端和pc端的区别和特点，才能真正理解做适配的精髓，这里就简单介绍下；

网上找不到主流android设备的数据表，就以iphone为例：

以iphone6为例：
竖屏宽为375，叫做逻辑像素（有的地方叫独立像素）；
竖屏宽的像素750，叫做物理像素，是设备实际的光点个数，要知道屏幕都是由一个一个光点组成的;
像素比（Asset）2x，就是2倍，...

			
		

	





	

		

			

				
					
大屏适配pad包括大屏上的弹框

				
			

			

				

					dongheng123的博客
				

				

					03-11
					
					544
					
				

			

		

		

			
				
【代码】大屏适配pad包括大屏上的弹框。

			
		

	





	

		

			

				
					
html全屏ipad顶部状态栏,iPad横屏和竖屏界面尺寸设计规范【最全】

				
			

			

				

					weixin_39580749的博客
				

				

					05-30
					
					2079
					
				

			

		

		

			
				
今天25学堂继续跟大家回顾一下ipad界面设计尺寸规范和具体的设计数值。这里从ipad横屏、竖屏的2个不同的场景跟大家聊聊ipad的界面设计尺寸规范。之前25学堂也跟大家分享过：今天跟随老谭童鞋一起来回顾iPad横屏和竖屏界面尺寸设计规规范.第一部分：iPad横屏(Landscape)界面设计尺寸规范iPad在横屏(Landscape)模式下，界面区域元素主要由下图所示构成：横屏主要尺寸：宽度：1...

			
		

	





	

		

			

				
					
js-横竖屏font-size，rem适配方法

				
			

			

				

					HAZER644的博客
				

				

					04-11
					
					561
					
				

			

		

		

			
				
最近在学习H5的一些适配，因为之前很久没有接触代码，所以很多东西都忘记了，计划是两个月回到半年前的状态。

目录

横竖屏分开

横竖屏共用

参数解释

知识点记忆

横竖屏分开


//屏幕适应
    (function (win, doc) {
        if (!win.addEventListener) return;
        var html = document.do...

			
		

	





	

		

			

				
					
移动端REM适配的几种方法

				
			

			

				

					weixin_43802583的博客
				

				

					11-30
					
					916
					
				

			

		

		

			
				
移动端REM适配的几种方法
一、网易采用的方式
步骤：

根据设计稿尺寸完成页面；
设置meta，控制视口宽度，让页面以1:1比例渲染页面
动态设置html的font-size；
把各元素的px值除以100转换为rem（字体除外）

关键代码
设置视口：

给meta设置这些属性：name=&amp;amp;quot;viewport&amp;amp;quot; content=&amp;amp;quot;initial-scale=1,maximum-scale=1,mi...

			
		

	





	

		

			

				
					
rem + vw 移动端适配

				
			

			

				

					weixin_50643343的博客
				

				

					10-22
					
					989
					
				

			

		

		

			
				
vw和vh也是一个动态单位，他们相对的是一个网页可视窗口的单位；

			
		

	





	

		

			

				
					
移动端横屏适配

				
			

			

				

					GitChat
				

				

					07-02
					
					627
					
				

			

		

		

			
				
我们在做移动端页面的时候，绝大部分页面都是在竖屏展示。而随着用户需求的更加，开始出现了需要横屏展示的页面。那么，作为前端开发人员，如何去做横屏适配呢？本场 Chat 就来说说移动端中的横屏适配：

横屏适配需求
横屏适配两种实现方式
横屏中使用 dom 元素
横屏中使用 canvas 以及 canvas 框架
横屏适配小贴士

本 Chat 主要面向于前端开发者以及从事移动端相关开发的人员。...

			
		

	





	

		

			

				
					
vue3移动端适配大屏

					
最新发布

				
			

			

				

					04-23
				

			

		

		

			
				
<think>嗯，用户问的是如何在Vue3项目中实现移动端到大屏的适配方案。首先，我需要回忆一下移动端适配的常用方法。根据之前的引用内容，用户可能已经了解了一些rem适配方案，比如rem配合媒体查询、js动态设置或者使用VW。但这次的问题是要适配从移动端到大屏，可能需要更灵活的响应式设计。

首先，我应该考虑Vue3的特性，比如组合式API和响应式工具，可能可以用来动态调整布局。然后，适配方案可能需要结合多种方法，比如使用rem或vw作为单位，同时利用媒体查询来针对不同屏幕尺寸应用不同的样式。另外，大屏可能需要更多的布局调整，比如弹性布局或者栅格系统，这时候可能需要像Tailwind CSS这样的工具来简化响应式设计。

接着，用户可能需要的不仅仅是基本的rem适配，还需要元素尺寸的动态缩放。这时候，使用JavaScript监听窗口变化，动态计算根字体大小可能有效。同时，像scale-box这样的组件可能对大屏适配有帮助，特别是在保持比例的情况下缩放内容。

另外，图片和媒体的适配也很重要，可能需要使用响应式图片，或者像v-lazy这样的懒加载插件来优化性能。视口单位（vw/vh）和百分比布局的结合使用可能更灵活，适应不同屏幕尺寸。

还要考虑第三方库的支持，比如lib-flexible或者postcss-px-to-viewport，这些工具可以自动转换单位，简化开发流程。同时，自定义指令可能在需要动态调整元素尺寸时派上用场，比如根据屏幕大小改变字体或间距。

最后，测试环节不可忽视，需要确保不同设备和屏幕尺寸下的显示效果一致，可能推荐使用浏览器开发者工具进行多设备模拟测试。

需要综合这些方法，提供一个分步骤的解决方案，涵盖基础配置、动态缩放、布局调整、第三方工具和测试建议。同时，要确保回答结构清晰，步骤明确，帮助用户逐步实现适配。</think>### Vue3移动端到大屏适配方案分步解析

在Vue3项目中实现移动端到大屏的适配，需要结合响应式布局与动态缩放策略。以下是经过验证的完整解决方案：

#### 一、基础适配方案
1. **视口单位+rem混合方案**
```javascript
// main.js
const setRootFontSize = () => {
  const baseWidth = 375 // 以iPhone6/7/8为基准
  const scale = document.documentElement.clientWidth / baseWidth
  document.documentElement.style.fontSize = `${Math.min(scale, 4) * 100}px` // 限制最大缩放比例
}
window.addEventListener('resize', setRootFontSize)
setRootFontSize()
```
```css
/* 使用混合单位 */
.container {
  padding: 0.2rem 0.1vw; /* 横向用vw保持流动性，纵向用rem保持比例 */
  font-size: clamp(14px, 0.16rem + 0.5vw, 24px); /* 动态字体大小 */
}
```
该方案结合了rem的等比缩放和vw的视口响应特性[^2]

2. **响应式断点配置**
```javascript
// breakpoints.js
export const BREAKPOINTS = {
  MOBILE: 375,
  TABLET: 768,
  DESKTOP: 1280,
  LARGE_SCREEN: 1920
}
```

#### 二、大屏适配增强方案
1. **动态缩放容器**
```vue
<template>
  <div ref="scaleContainer" class="scale-wrapper">
    <slot></slot>
  </div>
</template>

<script setup>
import { ref, onMounted, onBeforeUnmount } from 'vue'

const scaleContainer = ref(null)
const baseWidth = 1920 // 设计稿基准宽度

const updateScale = () => {
  const { clientWidth } = document.documentElement
  const scale = clientWidth / baseWidth
  scaleContainer.value.style.transform = `scale(${scale}) translateX(-50%)`
  scaleContainer.value.style.width = `${baseWidth}px`
}

onMounted(() => {
  window.addEventListener('resize', updateScale)
  updateScale()
})

onBeforeUnmount(() => {
  window.removeEventListener('resize', updateScale)
})
</script>

<style>
.scale-wrapper {
  position: fixed;
  left: 50%;
  top: 0;
  transform-origin: 0 0;
  transition: transform 0.3s;
}
</style>
```

2. **栅格系统配置**
```css
/* 响应式栅格 */
.grid-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: clamp(10px, 1vw, 30px);
}

@media (min-width: 1280px) {
  .grid-container {
    grid-template-columns: repeat(4, 1fr);
  }
}
```

#### 三、进阶优化方案
1. **PostCSS自动转换**
```javascript
// postcss.config.js
module.exports = {
  plugins: {
    'postcss-px-to-viewport': {
      unitToConvert: 'px',
      viewportWidth: 375, // 移动端基准
      viewportHeight: 667, 
      unitPrecision: 5,
      propList: ['*'],
      viewportUnit: 'vw',
      fontViewportUnit: 'vw',
      selectorBlackList: [],
      minPixelValue: 1,
      mediaQuery: false,
      replace: true,
      exclude: [/node_modules/],
      landscape: false,
      landscapeUnit: 'vw',
      landscapeWidth: 1136
    }
  }
}
```

2. **混合单位策略**
```css
/* 弹性布局示例 */
.card {
  width: min(90vw, 1200px); /* 限制最大宽度 */
  height: calc(100vh - 60px); /* 结合视口单位 */
  margin: 0 auto;
  padding: max(2vh, 20px);
}
```

#### 四、实践建议
1. **设备方向处理**
```javascript
// 横竖屏检测
const checkOrientation = () => {
  if (window.matchMedia("(orientation: portrait)").matches) {
    document.body.classList.add('portrait')
    document.body.classList.remove('landscape')
  } else {
    document.body.classList.add('landscape')
    document.body.classList.remove('portrait')
  }
}
```

2. **性能优化**
```vue
<template>
  <img 
    :src="responsiveImage.url"
    :srcset="responsiveImage.srcset"
    sizes="(max-width: 768px) 100vw, 50vw"
    alt="responsive image"
  >
</template>

<script setup>
import { computed } from 'vue'

const props = defineProps({
  imageSet: Object
})

const responsiveImage = computed(() => ({
  url: props.imageSet.mobile,
  srcset: `
    ${props.imageSet.mobile} 375w,
    ${props.imageSet.tablet} 768w,
    ${props.imageSet.desktop} 1280w
  `
}))
</script>
```

###

			
		

	



              




          




        



    





    



      

      

        
      

      





	

		评论	
	

  
	




  

    

      添加红包
      
    

    

      

        
        

          
          
        

        
请填写红包祝福语或标题

      

      

        
        

          
          个
        

        
红包个数最小为10个

      

      

        
        

          
          元
        

        
红包金额最低5元

      

      

        
        

          当前余额3.43元
          前往充值 >
        

      

      

        

          需支付：10.00元
        

        
        
      

    

  





  

    
    
  

  

    
    
  








  

    

      

        

          

            
            
成就一亿技术人!

          

          

        

        

          

          

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

        

      

      

        

          

            
              
            
            

              
hope_wisdom
 发出的红包
            

          

        

        

          

          

          

        

      

    

    

  



      
      

      
实付元

      
使用余额支付

      

        

          

            
            点击重新获取
          

        

        
扫码支付

      

      

        
          
            
          
          
        
      

      

        
        钱包余额
          0
          

            
            

              

                
抵扣说明：

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

              

            

          

      

      余额充值