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

最新推荐文章于 2023-03-07 10:18:54 发布
最新推荐文章于 2023-03-07 10:18:54 发布
阅读量2.1k 收藏 7
点赞数 1
文章标签： vue.js css3
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_38990605/article/details/111221674
版权

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

手机端：
在这里插入图片描述

最低0.47元/天 解锁文章
栀妹儿
关注
  • 1
    点赞
  • 踩
  • 7
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
vue移动端屏幕自适应
qq_38669001的博客
03-27 2504
移动端屏幕自适应 1.rem: rem(font size of the root element)是指相对于根元素的字体大小的单位 2.想法: 使用rem，字体大小与html标签的font-size属性相关，那么只要根据屏幕大小改变html标签的font-size属性，字体大小就与屏幕大小相关，就能使得移动端屏幕自适应 3.根据屏幕大小改变html标签的font-size属性: 使用单位vw...
vue3移动端适配的解决方案（老方案）
12-01
文件名 "vue3-page-adapter-pc-m" 暗示这是一个包含移动端和桌面端适配的 Vue3 页面示例。可能包含了不同的 CSS 样式文件、媒体查询和自定义组件，用于演示如何在 Vue3 项目中实现跨平台适配。 6. **具体实践**： ...
VUE 响应式布局-根据浏览器宽度展示不同的css样式
m0_51079637的博客
10-28 5631
“自己写的前端页面只能适配自己电脑，一旦再他人电脑上打开布局全乱” 就这个问题已经困扰我许久，尤其是当我在手机上打开时尤为明显话不多说，上图！ 很正常的模样是吧？看手机效果 那一瞬间，我觉得我是个fw(法王) 终于在我的不懈努力下，终于实现了动态的页面效果！ 如下图： 虽然还有些问题，但是！我觉的问题不大 主要用到的就是elementui中布局的响应式属性： 以及css3的响应式布局 @media 首先来说elementui布局的响应式属性 elementUi将一行划分成24块，可以通过使用e
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 317
适配
【vue】vue +element 搭建项目，要求既支持pc端又支持移动端
weixin_33720078的博客
06-04 7554
使用场景：有适配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 1656
方法一：在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方法可见...
基于vue3.x 、Typescript、vite、Element plus等，适配手机、平板、pc 的后台开源免费模板库
05-03
这个开源模板库不仅适配手机、平板，还支持PC，意味着它采用了响应式布局，能够根据不同的设备屏幕尺寸提供合适的展示效果。这通常通过CSS框架（如Bootstrap或Element Plus自身的样式）和媒体查询来实现，确保用户在...
基于Springboot + Vue 开发的前后端分离博客(PC端自适应+移动端微信小程序+移动端App)+源代码+文档说明
最新发布
11-29
# 项目特点 - 前台参考"Hexo"的...3、如果基础还行，也可在此代码基础上进行修改，以实现其他功能，也可用于毕设、课设、作业等。 下载后请首先打开README.md文件（如有），仅供学习参考, 切勿用于商业用途。
基于Vue3+Element编写的一款后台管理系统（兼容移动端）
02-16
vue-pure-admin 是一款开源免费且开箱即用的中后台管理系统模版。使用了最新的 Vue3、Vite、Element-Plus、TypeScript、Pinia、Tailwindcss 等主流技术开发。
手机自适应H5炫酷登陆页面.7z
08-03
好看的H5登录界面，H5登录界面，H5编写的登录和注册表单，带验证、页面能切换，页面自适应，炫酷不失典雅，导入即用，无需更改配置，无需配置环境，谢谢支持！
pc与移动端端适配网页模板
02-15
这些模板都设计成了响应式的，意味着它们包含适应不同屏幕大小的CSS样式和布局结构。 例如，`index.html`是网站的入口点，通常包含导航栏、主内容区域和页脚等元素。在PC端，这些元素可能以标准的多列布局显示；而...
vue解决PC端等比缩放适配手机端
zhaokai621的博客
07-05 2262
vue等比缩放PC端适配手机端
vue的UI框架
ZHXT__的博客
10-28 527
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 3058
需求： 项目中pc端和移动端两套代码需根据用户的设备进行自动切换。 说明： 该方法中的所有系统都是在同一根目录下，只是实现了多入口在入口处添加用户设备的条件判断，通过不同的入口显示不同的页面。 实现： 代码分为两个部分，pc端（pc）和移动端（move） 在使用脚手架创建项目的时候就有一个系统了，这里将脚手架创建出来的这个做pc端，我只需要再添加一个移动端的就可以了。 1、在public文件下创建一个move.html (复制index.html做修改就可以了) 2、修改move.html 改成 id=“
基于vue cli3的移动端适配解决方法（px转rem）
weixin_45031595的博客
08-23 3992
基于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 404
通过判断不同的终端显示不同的页面 vue打包过后生成dist文件,对比两套生成的dist文件，将共同的css，js写在一起，不同的通过document.write写到文档中，当然也可以用响应式的布局，但是响应式的布局加载慢，写法麻烦后期难以维护，小页面还好大的项目的不同点太多了，几乎跟写两套没什么区别 function IsPC() { var userAgentInfo = navigator.userAgent; var Agents = ["Android", "iPho
Vue移动端与PC端适配方案viewport+postcss-px-to-viewport
passWordEnterX的博客
08-10 1894
viewport翻译成中文的意思大致是视图、视窗。在移动端设备中,整块显示屏就相当于视图、视窗。但这种说法也并不完全正确。因为在移动端设备中,浏览器视图并不是整个屏幕。因此viewport又被分为了3种layout viewport(布局视口)、visual viewport（视觉视口）、ideal viewport（理想视口）为了能够适配到pc端开发页面中,大部分浏览器把viewport的宽度设为了980px 这个浏览器默认设置的视图被称为。我们可以使用来获取。...
vue3+vite+ts实现Pc端适配
08-31
对于Vue 3 + Vite + TypeScript实现PC端适配，你可以遵循以下步骤： 1. 安装Vue 3和Vite：首先，确保你已经安装了Node.js和npm。然后运行以下命令来全局安装Vite和创建一个新的项目： ``` npm install -g create-vite create-vite my-app --template vue-ts cd my-app npm install ``` 2. 安装依赖：进入项目目录后，使用npm安装所需的依赖项，包括一些可能用到的UI库或CSS框架，例如Element Plus、Ant Design等等。 3. 创建布局组件：在src目录下创建一个Layout组件，作为整个应用的主要容器。这个组件将包含头部、侧边栏和主体内容。 4. 使用路由：在src目录下创建一个router目录，并在其中创建一个index.ts文件。在这个文件中，你可以使用Vue Router创建路由配置，并在主要布局组件中使用<router-view>来渲染不同的页面。 5. 创建页面组件：在src目录下创建一个views目录，并在其中创建各个页面的组件。每个页面组件将包含该页面的内容。 6. 创建样式文件：你可以使用CSS、SCSS或者其他CSS预处理器来编写样式。在src目录下创建一个styles目录，并在其中创建一个全局样式文件。 7. 实现响应式布局：Vue 3引入了Composition API，你可以使用`reactive`和`ref`等函数来处理响应式布局。根据不同的屏幕尺寸，你可以使用媒体查询或CSS框架的栅格系统来调整布局。 8. 添加适配代码：你可以使用Vue的全局mixin或自定义指令来添加适配代码。在适配代码中，你可以根据屏幕尺寸或其他条件，动态改变样式、布局或内容。 以上是一个大致的步骤，你可以根据实际需求和项目的复杂性进行调整。希望对你有所帮助！如果有任何问题，请随时提问。

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

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值