手机端方案（viewport单位）

最新推荐文章于 2025-02-19 07:30:00 发布

Amyuan的笔记

最新推荐文章于 2025-02-19 07:30:00 发布

阅读量2k

点赞数

分类专栏： CSS3

本文链接：https://blog.youkuaiyun.com/Ee2222/article/details/80823163

版权

CSS3 专栏收录该内容

15 篇文章

订阅专栏

lib-flexible方案过时了。。
再聊移动端页面的适配
 如何在Vue项目中使用vw实现移动端适配

viewport单位得到众多浏览器的兼容。所以直接使用原生css就可以了。

px到vw的转换插件
postcss-px-to-viewport
gulp工作流

记得带meta标签

<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

Amyuan的笔记

关注关注

0
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

专栏目录

响应式 Web 设计 - Viewport

rolanannn的博客

04-11

748

帮助大家快速了解前段响应式基础操作

手机端用rem+scss做适配的详解

09-27

因此，使用REM（root em）单位结合SCSS预处理器成为一种高效且流行的响应式网页设计解决方案。 REM单位相对于根元素（html）的字体大小进行计算。例如，如果根元素字体大小为10px，那么1rem就等于10px，2rem就等于...

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

视口单位（ Viewport units )初探

weixin_34319111的博客

03-11

472

视口单位（ Viewport units )初探起因最近在写的一个仿网易云的webapp中有一个nav组件。其中nav-item需要宽度自适应屏幕的1/4.其中nav-icon需设置圆形。问题在于：宽度不确定，需要设置高度与宽度相同，且icon-font的font-size需随nav-item的宽度变化。首先想到的是css3的calc() 或者设置高为0，让padding撑起高的方案来实现。但...

Vue 93 ，前端自适应布局：使用 postcss-px-to-viewport 实现网页适配，PC端网页适配（ px转vw，postcss.config.js文件配置）

最新发布

weixin_65793170的博客

02-19

1711

⭐在当今的前端开发中，网页需要在各种不同尺寸的设备上完美显示，这就要求我们采用有效的自适应布局方案。postcss-px-to-viewport 是一个强大的 PostCSS 插件，它可以帮助我们将 CSS 中的 px 单位自动转换为视口单位（如 vw），从而实现网页的自适应布局。这里来详细介绍下如何使用 postcss-px-to-viewport 插件，并结合 Vue 项目进行实际操作。

viewport

weixin_30297281的博客

09-03

155

CSS Viewport （视口）单位

weixin_40624809的博客

11-16

379

类型视口单位为：vw（视口宽度），vh（视口高度），vmin和vmax。视口单位基于页面的根元素，百分比则基于它们所在的容器 1. vw（视口宽度） vw单位表示根元素宽度的百分比，1vw等于视口宽度的1% 2. vh（视口高度） vh单位表示根元素高度的百分比，一个vh等于视口高度的1%。 3. Vmin (宽和高哪个小取哪个) vmin表示视口的宽度和高度中的较小值，也就是vw 和 vh 中的较小值。如果视口宽度大于其高度，则将根据高度计算该值。 4.Vmax （宽和高哪个大取哪个） vmax与vm

Viewport介绍

http://www.onlyze.cn/

04-12

334

一、Viewport的概念通俗的讲，移动设备上的viewport就是设备的屏幕上能用来显示我们的网页的那一块区域，在具体一点，就是浏览器上(也可能是一个app中的webview)用来显示网页的那部分区域，但viewport又不局限于浏览器可视区域的大小，它可能比浏览器的可视区域要大，也可能比浏览器的可视区域要小。在默认情况下，一般来讲，移动设备上的viewport都是要大于浏览器可视区域的，这是...

html5手机端页面可以向右滑动导致样式受影响的问题

09-27

在HTML5手机端页面开发中，常常会遇到用户向右滑动时，页面样式受到影响的问题。这通常是由于页面布局或移动端适配设置不正确导致的。以下是对这个问题的详细分析和解决方案。首先，问题的核心在于移动端适配。当...

手机端页面rem宽度自适应脚本

09-03

总结来说，本文通过介绍rem单位、viewport元标签、JavaScript脚本的编写和使用Sass/Less预处理器的优势，为开发人员提供了实现手机端页面宽度自适应的一套完整解决方案。这套方案不仅考虑到了不同设备的特性，而且...

详解vue中移动端自适应方案

10-17

vue做移动端适配最佳解决方案(亲测有效)

12-04

vw 解决方案 1. 安装并配置PostCss插件代码如下:npm i postcss-aspect-ratio-mini postcss-px-to-viewport postcss-write-svg postcss-cssnext postcss-viewport-units cssnano –S 2. 对 PostCss 进行配置 ...

viewport的意义

安柏霖的专栏

05-30

2155

viewport用来把渲染限制在屏幕的一部分。具体通过设置left, top, width, height来达到。 vertex shader输出的vector是通过ModelMatrix, ViewMatrix, ProjectMatrix转换过的结果。形如：(x,y,z,w) 这个坐标形式称作，clipping space, clipping space当然是clip了。结果再

几种常用的长度单位 px % Viewport calc()

吴冬雪的博客

05-30

569

1、px 像素，我们在网页布局中一般都是用px。 2、百分比百分比一般宽泛的讲是相对于父元素，自适应网页布局越来越多，百分比也经常用到了。 3、Viewport viewport：可视窗口，也就是浏览器。 vw Viewport宽度， 1vw 等于viewport宽度的1% vh Viewport高度， 1vh 等于viewport高的的1%...

CSS Viewport 单位，很多人还不知道使用它来快速布局！

粉丝们务必加入微信粉丝群

07-01

3607

**CSS Viewport units(视口单位)**在过去几年已经出现了，随着时间的推移，越来越多的开发人员开始使用它们。它们的好处在于为我们提供了一种不需要使用J avaScrip...

vue+pc端适配手机端

01-17

### Vue PC端项目适配移动端方案 #### 一、使用 `postcss-pxtorem` 和 `amfe-flexible` 为了更好地处理不同屏幕尺寸下的样式问题，在Vue项目中可以引入`postcss-pxtorem`和`amfe-flexible`来实现单位从`px`到`rem`的转换。这有助于保持布局的一致性和灵活性[^2]。安装依赖： ```bash npm install postcss-pxtorem amfe-flexible --save-dev ``` 配置`postcss.config.js`文件，设置根字体大小以及哪些文件夹内的CSS需要被转换： ```javascript module.exports = { plugins: [ require('postcss-pxtorem')({ rootValue: 16, // 设计稿宽度/10 或者其他值 propList: ['*'] }) ] } ``` 在入口HTML文件中加入`<script>`标签加载`flexible.js`: ```html <script src="./path/to/flexible.js"></script> ``` #### 二、调整视口元数据对于已经存在的PC端项目来说，如果发现页面无法正常缩小显示，则可能是由于`meta viewport`标签的存在方式不当所引起的。建议保留必要的属性并适当修改其参数以适应移动设备的需求。例如，将原有的<meta>标签改为如下形式可帮助浏览器正确渲染网页内容[^3]: ```html <meta name="viewport" content="width=device-width, initial-scale=1"> ``` #### 三、构建独立的移动端路由体系当业务逻辑差异较大时，考虑为移动端单独编写一套路由规则也是一种有效的策略。这样可以根据访问终端的不同加载相应的组件和服务，从而提供更佳用户体验[^4]。创建两个不同的路由配置文件分别用于PC端和移动端，并通过检测User-Agent等方式决定启动哪一路由实例： ```javascript // pcRoutes.js import Home from './views/Home.vue'; export default [ { path: '/', component: Home }, ... ]; // mobileRoutes.js import MobileHome from './views/MobileHome.vue'; export default [ { path: '/', component: MobileHome }, ... ]; ``` 最后根据环境变量或请求头中的信息动态切换使用的路由器对象： ```javascript const isMobile = /Android|webOS|iPhone|iPod|BlackBerry/i.test(navigator.userAgent); app.use(VueRouter, new VueRouter(isMobile ? mobileRoutes : pcRoutes)); ```