【vue+css3】屏幕根据大小变化样式（PC和手机端适配代码）

最新推荐文章于 2024-09-10 22:00:43 发布
最新推荐文章于 2024-09-10 22:00:43 发布
阅读量2.1k 收藏 7
点赞数 1
文章标签： vue.js css3
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_38990605/article/details/111221674
版权
本文介绍如何使用Vue.js和CSS3技术实现页面的响应式布局，确保在PC端和手机端都能获得良好的视觉体验。通过CSS3媒体查询，可以轻松调整样式以适应不同屏幕尺寸。
摘要由CSDN通过智能技术生成

PC端页面适配手机端，利用css实现：
类似下图 PC端：
在这里插入图片描述
在这里插入图片描述

手机端：
在这里插入图片描述
在这里插入图片描述
只需要在需要的页面加入：@media (max-width:580px){....}

.login-content{
   
  position: absolute;
  justify-content: center
最低0.47元/天 解锁文章
栀妹儿
关注
vue 使用css根据屏幕大小宽度自适应调整
祖先生的博客
09-02 6432
<style> /* 屏幕小于1440px */ @media screen and (max-width: 1439px) { .add{ width: 260px; } } /* 屏幕等于1440px */ @media screen and (max-width: 1440px) and (min-width: 1440px) { .add { width: 348px; } } /* 屏幕大于1440px */ @media screen and
vue移动端屏幕自适应
qq_38669001的博客
03-27 2544
移动端屏幕自适应 1.rem: rem(font size of the root element)是指相对于根元素的字体大小的单位 2.想法: 使用rem，字体大小与html标签的font-size属性相关，那么只要根据屏幕大小改变html标签的font-size属性，字体大小就与屏幕大小相关，就能使得移动端屏幕自适应 3.根据屏幕大小改变html标签的font-size属性: 使用单位vw...
vue大屏适配（适配文字和屏幕分辨率）
yuan0209的博客
08-09 242
vue大屏适配（适配文字和屏幕分辨率）
vue项目经验：移动端、pc端适配方案（px转rem）
热门推荐
weixin_45031595的博客
02-06 1万+
vue项目移动端、pc端适配方案 vue项目移动端、pc端适配方案 lib-flexible 根据屏幕宽度，自动设置html的font-size px2rem-loader 自动将px单位转换成rem 一、第一步先安装 flexible和 px2rem-loader（命令行安装） npm i lib-flexible -S npm i px2rem-loader -D 简要介绍这两个包...
vue pc，移动适配
weixin_60477441的博客
03-07 354
适配
【vue】vue +element 搭建项目，要求既支持pc端又支持移动端
weixin_33720078的博客
06-04 7571
使用场景：有适配pc端改为适配pc端和移动端，使用2套css 代码实现App.vue created: function () { if(document.documentElement.clientWidth > 640){ require('./style/index.scss'); this.plaform = 'pc'; ...
html页面根据屏幕大小用不同样式,如何根据屏幕宽度加载不同的样式
weixin_36090062的博客
06-03 1714
方法一：在css里用@media (max-width:330px){}。比如@media (max-width:320px){}@media (max-width:414px){}@media (max-width:900px){}方法二：在link里指定：方法三:js非用js的话 就是先用js获取网页可见宽度：document.body.clientWidth (其他宽度及jquery方法可见...
VUEPC和手机屏幕适配
qq_45499633的博客
03-17 9052
vue项目移动端、pc端适配方案 vue项目移动端、pc端适配方案 lib-flexible 根据屏幕宽度，自动设置html的font-size postcss-px2rem 自动将px单位转换成rem 一、安装 lib-flexible和 postcss-px2rem npm i lib-flexible -S npm i postcss-px2rem -S 1 2 3 简要介绍这两个包的用途： lib-flexible会为页面根据屏幕自动添加标签，动态控制initial-scale，maximum-sc
基于Springboot + Vue 开发的前后端分离博客(PC端自适应+移动端微信小程序+移动端App)+源代码+文档说明
11-29
# 项目特点 - 前台参考"Hexo"的...3、如果基础还行，也可在此代码基础上进行修改，以实现其他功能，也可用于毕设、课设、作业等。 下载后请首先打开README.md文件（如有），仅供学习参考, 切勿用于商业用途。
基于vue3.x 、Typescript、vite、Element plus等，适配手机、平板、pc 的后台开源免费模板库
05-03
这个开源模板库不仅适配手机、平板，还支持PC，意味着它采用了响应式布局，能够根据不同的设备屏幕尺寸提供合适的展示效果。这通常通过CSS框架（如Bootstrap或Element Plus自身的样式）和媒体查询来实现，确保用户在...
rem结合媒体查询适配的vue项目（PC端和移动端共用一套代码）
BigFamer的博客
11-16 5438
一、前言 上周四接到了一个简单的纯前端网页的项目，我用了三天时间已经开发并且部署完毕（为了实现快速简易部署，使用了gitee pages进行部署，这篇文章记录我使用gitee pages部署的详细过程）。这个展示页要求在PC端和移动端双场景使用，但是由于页面简单，为了简单起见，我采用rem结合媒体查询适配开发一套代码来实现这个场景要求。 二、实现结合媒体查询的rem适配 2-1、rem布局 2-1-1、什么是rem rem是CSS3新增的一个相对单位（root em，根em），这个单位与em有什么区别呢？区
vue解决PC端等比缩放适配手机端
zhaokai621的博客
07-05 2344
vue等比缩放PC端适配手机端
vue的UI框架
ZHXT__的博客
10-28 562
PC端 ：Element 官网地址：官网 介绍：element ui框架的按钮组件，这款由饿了么前端开源的UI框架，一经面世，就收获大量程序员的芳心。在github 上更是高达29.8k的star早已说明一切。用于开发PC端的页面还是绰绰有余的。如果说你是用vue开发者，却没用过element UI，那你肯定不是合格的vue开发者。 ：iview 官网地址：官网 介绍：iView 是一套基...
PC端自适应（vue）&& 移动端+vant
qq_42928070的博客
09-18 1万+
npm i lib-flexible -S npm i px2rem-loader -D 安装完成以后在main.js引入 import 'lib-flexible' 在 vue-cli 生成的 webpack 配置中，vue-loader 的 options 和其他样式文件 loader 最终是都是由 build/utils.js 里的一个方法生成的。我们只需在 cssLoader 后再加上...
vuecli3中实现根据用户设备自动切换pc端和移动端两套代码
jiangjunyuan168的博客
11-04 3200
需求： 项目中pc端和移动端两套代码需根据用户的设备进行自动切换。 说明： 该方法中的所有系统都是在同一根目录下，只是实现了多入口在入口处添加用户设备的条件判断，通过不同的入口显示不同的页面。 实现： 代码分为两个部分，pc端（pc）和移动端（move） 在使用脚手架创建项目的时候就有一个系统了，这里将脚手架创建出来的这个做pc端，我只需要再添加一个移动端的就可以了。 1、在public文件下创建一个move.html (复制index.html做修改就可以了) 2、修改move.html 改成 id=“
vue项目经验：基于vue cli3的移动端适配解决方法（px转rem）
weixin_45031595的博客
08-23 4056
基于vue cli3的r移动端适配问题 基于vue-cli3的vue项目移动端样式适配，lib-flexible和postcss-px2rem 1，第一步先安装 flexible和 postcss-px2rem（命令行安装） npm install lib-flexible --save npm install postcss-px2rem --save 简要介绍这两个包的用途： flexib...
通过判断不同的终端显示不同的页面
小菜鸟的博客
04-21 412
通过判断不同的终端显示不同的页面 vue打包过后生成dist文件,对比两套生成的dist文件，将共同的css，js写在一起，不同的通过document.write写到文档中，当然也可以用响应式的布局，但是响应式的布局加载慢，写法麻烦后期难以维护，小页面还好大的项目的不同点太多了，几乎跟写两套没什么区别 function IsPC() { var userAgentInfo = navigator.userAgent; var Agents = ["Android", "iPho
Vue--》视觉盛宴：提升可视化大屏分辨率适配的技巧
最新发布
ztK63LrD的博客
09-10 121
在当今数据驱动的世界中，大屏幕可视化已经成为展示复杂信息的关键工具，然而如何在各种分辨率下保持视觉效果的一致性和清晰度，在这篇文章中，我们将深入探讨如何通过有效的设计和技术策略，确保你的大屏视觉效果在任何分辨率下都能保持最佳状态，准备好迎接视觉上的突破吧！
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值