移动端适配（rem、viewport、百分比）

向北航行五万里

已于 2022-03-03 11:43:11 修改

阅读量748

点赞数

文章标签： css css3 javascript

于 2022-03-01 09:43:04 首次发布

本文链接：https://blog.csdn.net/weixin_52551539/article/details/123193073

版权

本文介绍了移动Web开发中的视口概念，包括视觉视口、布局视口和完美视口，强调了如何通过设置viewport实现布局视口与视觉视口的匹配，以达到良好的页面适配效果。同时，讨论了REM作为单位在响应式设计中的应用，以及百分比适配的局限性，旨在确保不同设备上元素尺寸的等比例缩放，保持设计的一致性。

摘要由CSDN通过智能技术生成

1.视口：视觉视口、布局视口、完美视口（让布局视口与视觉视口相等，就是完美视口）

-视觉视口：就是我们看到的手机的窗口的大小

-布局视口：就是我们网页的大小（原本的布局视口要大于视觉视口）

使用viewport适配就可以：（缩放比为1：1，就是让视觉视口与布局视口一样，）

rem适配（root element：即根节点字体的大小）：在开发时，ui提供一套设计稿，为了能在不同的手机上呈现一样的效果（一致的最终目标是等比例，手机屏幕大，元素就大，小就小，动态的变化）

百分比适配：就是等比列缩放，几乎不用（比如在一个小屏幕上使用一个图片大小为20*20，如果去原来屏幕两倍大小的设备去投放这个页面，那么图片大小就变成了40*40，可能会导致图片模糊发虚

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

向北航行五万里

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

百分比布局适配

01-03

移动端视口介绍

weixin_45846980的博客

11-08

781

视口(viewport) 是用来约束网站中最顶级块元素的，它决定了html的大小 pc端设备参照浏览器窗口的大小，视口不大重要 //获取视口 var clientWidth = document.documentElement.clientWidth; var clienthight = document.documentElement.clientHight; 视口对pc端影响 1.如果确定具体的宽高值，当超出viewport的大小的时候，会出现滚动条 2.如果设置的宽度为100%,当子元素宽高大于父

参与评论您还未登录，请先登录后发表或查看评论

一些常见的移动端适配方案，你了解吗？

最新发布

2401_83384536的博客

07-19

443

移动端设备的尺寸很多，而 UI 设计稿一般只会基于一个尺寸（一般是 375px 或 750px ）进行设计。目前移动端适配方案有多种，本文将介绍一些具有代表性的适配方案。目前比较推荐的移动适配方案是 rem&vw，了解其中的适配原理对于前端而言是非常重要的，相关问题也经常出现在面试题中。熟练使用插件也能给我们的工作带来很大的帮助。

移动端三个视口

weixin_30788619的博客

07-06

373

转载：http://www.cnblogs.com/wmmang-blog/p/4708351.html 本文记录学到的有关视口的内容，不足之处请指正。 1、视口有时会使用百分比来声明宽度,如： html,body{} div{width:30%;} 假设div是body的子元素，这段css就表示该div占body宽度的30%.body没有显示声明宽度...

移动端中的视口

admin_djp的博客

11-10

665

文章目录前言三种视口1.布局视口2.视觉视口3.理想视口前言在 PC 端，视口指的是浏览器的可视区域，其宽度和浏览器窗口的宽度保持一致。在 CSS 标准文档中，视口也被称为初始包含块，它是所有 CSS 百分比宽度推算的根源，给 CSS 布局限制了一个最大宽度。而移动端则较为复杂，它涉及到三个视口：布局视口、视觉视口和理想视口。三种视口 移动端浏览器通常宽度是 240px~640px，而大多数为 PC 端设

移动端视口

y1815151的博客

10-25

148

视口分: 视觉视口：眼在页面上看到的内容布局视口：写html代码时的布局宽高 1、布局视口： <style> header{height: 50px ; background: pink; margin-bottom: 10px;} aside{width: 30%; background: red; height: 300px; float: left;} article{width: 68%; background: pink; height: 30...

移动端适配 rem & vw 计算工具

12-29

为了实现良好的跨设备、跨屏幕适配，开发者通常会采用一些特定的技术策略，其中就包括`rem`（root em）和`vw`（viewport width）单位。本文将详细讲解这两种单位以及相关的计算工具。 1. **`rem`单位** `rem`...

移动端适配rem+vw

yujin0213的博客

08-23

1364

前言对于做移动端开发的同学来说，rem这个单位并不陌生。通常我们做移动端适配，主流的方案大致有两种淘宝flexible.js 计算设备像素比，dpr=物理像素/css像素根据设备像素比，将页面宽乘以设备像素比，然后去计算rem，这样页面所有元素都会是正常的2倍然后通过meta标签的viewport对页面进行缩放，使得页面恢复正常根html的font-size值 = 屏幕宽度*设备像素比/10 以iphone6 375为例，1rem = 375 * 2 / 10 = 75px 然后在项目里写

CSS第九章 移动端布局-Viewport视口/移动端适配方案

晓葉斑比

06-04

1866

Viewport视口移动端模拟器访问的网站的PC端和移动端是否用同一代码实现？Viewport视口ViewPort设置移动端适配方案1. 流式布局(百分比布局)流式布局原则2. rem布局(等比缩放布局) 移动端模拟器切换平台之后，一定要重新刷新浏览器访问的网站的PC端和移动端是否用同一代码实现？ 1.大一点的网站的PC端和移动端都是分开开发的，各有一套代码。访问淘宝网 ->后端检测当前设备 ->如果是PC端 ->www.taobao.com 访问淘宝网 ->后端检

移动端的rem适配

qiaokelibangwo的博客

05-16

1538

移动端网页宽度几乎全为移动设备屏幕宽度的100%，而每个移动端设备的屏幕又有着各不相同的宽度。为了使页面在在不同的移动设备上能够保持统一的显示效果，这个时候就需要为移动端网页进行适配了。 移动端的适配方案有很多种，比如百分比布局,弹性和rem.vh 布局。 flex + rem单位做适配效果（比如淘宝和小米移动端）当前市场最多 flex + viewport width /vh单位做适配效果（比如 B站移动端 ）新兴，马上的一个趋势 rem 适配 rem 单位 rem 是一个相对单位

css之移动端适配方案rem与less&媒体查询响应式布局&bootstrap

qq_66318904的博客

03-25

1661

less是一个css预处理器，less文件后缀是.less。扩充了css语言，使css具备一定的逻辑性，计算能力。注意：浏览器不识别less代码，目前阶段，网页要引入对应的css文件vscode插件：easy less，保存less文件后自动生成对应的css文件。

移动端的视口viewport

chenrongwei92的博客

10-08

983

移动端的视口viewport涉及三个视口: 布局视口（Layout Viewport）视觉视口（Visual Viewport）理想视口（Ideal Viewport）布局视口（Layout Viewport）: 移动设备上的浏览器认为自己必须能让所有的网站都正常显示，即使那些不是为移动设备设计的网站(为PC端设计的网站)。由于移动设备的屏幕比PC的宽小很多，如果以浏览器的可视区域作为viewport，则那些为PC端设计的网站放到移动设备上显示时，必然会因为移动设备的viewport..

移动端视口（viewport）和布局

weixin_39288299的博客

05-22

431

视口两种像素：物理像素和 CSS 像素。物理像素：设备屏幕的物理像素。是 CSS 和 JS 中使用的一个抽象概念。它和物理像素之间的比例取决于屏幕的特性（是否为高密度）以及用户进行的缩放，由浏览器自行换算。三个视口：布局视口（Layout Viewport）、视觉视口（Visual Viewport）和理想视口（Ideal Viewport）布局 ...

移动端布局 - 视口

qq_33962481的博客

06-01

194

提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档文章目录前言一、pandas是什么？二、使用步骤1.引入库2.读入数据总结前言提示：这里可以添加本文要记录的大概内容：例如：随着人工智能的不断发展，机器学习这门技术也越来越重要，很多人都开启了学习机器学习，本文就介绍了机器学习的基础内容。提示：以下是本篇文章正文内容，下面案例可供参考一、pandas是什么？示例：pandas 是基于NumPy 的一种工具，该工具是为了解决数据分析任务而创建的。二、使用步骤 1.引入库代码

Web移动端开发：视口，布局视口 layout viewport，视觉视口 visual viewport，理想视口 ideal viewport

我就知道你会来，我们一起进步吧！

03-10

463

1.视口(viewport)就是浏览器显示页面内容的屏幕区域。视口可以分为布局视口、视觉视口和理想视口。

移动端适配——视口概念

m0_73861113的博客

11-01

297

三分钟带你搞懂：移动端适配中视口概念

移动端的开发-视口-适配

pyhui的技术博客

07-03

408

比较电脑端与手机端的效果可见，电脑端很大的图，移动上看就很小了不太好看再看一次大图的时候显示到手机上时，被等比例缩小了不希望有这样子的效果设置视口手机设备会有自己的宽和高效果 ...

浅谈移动端中的视口，前端开发学习计划

2401_84094029的博客

04-06

742

本人分享一下这次字节跳动、美团、头条等大厂的面试真题涉及到的知识点，以及我个人的学习方法、学习路线等，当然也整理了一些学习文档资料出来是附赠给大家的。知识点涉及比较全面，包括但不限于前端基础，HTML，CSS，JavaScript，Vue，ES6，HTTP，浏览器，算法等等详细大厂面试题答案、学习笔记、学习视频等资料领取，点击资料领取直通车免费领取！知识点涉及比较全面，包括但不限于前端基础，HTML，CSS，JavaScript，Vue，ES6，HTTP，浏览器，算法等等。

移动端适配指南：rem与viewport实战解析

本文主要介绍了在移动端开发中如何利用rem和viewport进行适配，以便让网页能在不同尺寸的设备上正常显示。一：rem适配 rem（root em）是CSS3引入的一个长度单位，它表示相对于根元素（通常是html元素）的字体大小...