PC端适配

最新推荐文章于 2024-06-03 20:21:49 发布
最新推荐文章于 2024-06-03 20:21:49 发布
阅读量840 收藏 1
点赞数
文章标签： javascript css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/ssqwdddw/article/details/107206920
版权
本文介绍了如何实现PC端的页面适配，基于1920px的设计稿，要求在1024~1920px之间元素宽高自适应。选用的解决方案是结合flexible.js、rem单位和flex布局。通过flexible.js将屏幕划分为24等份，设置基准值为80px，确保在不同宽度下元素比例正确。同时，需要限制屏幕宽度以保持良好的适配效果。
摘要由CSDN通过智能技术生成

1.项目需求:
设计稿：1920px
pc端适配：宽度在1024~1920之间页面元素宽高自适应
2.选定适配方案
flexible.js+rem+flex布局
3.步骤：
【1】使用flexible.js 把屏幕划分为 24 等份
var rem = docEl.clientWidth / 24
【2】cssrem 插件的基准值设置为 80px （效果图是 1920px / 24）

【3】要把屏幕宽度约束在1024~1920之间有适配

 <style>
    @media screen and (max-width: 1024px) {
   
        html {
   
            font-size: 42.66px
最低0.47元/天 解锁文章
帅奇
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
一篇文章搞懂，vue中pc端与移动端适配解决方案（亲测有效）
Web面试那些事儿的博客
10-11 7942
当涉及屏幕适配方案时，我们常常被众多选择所困扰，如postcss-pxtorem、postcss-px2rem、px2rem-loader、postcss-plugin-px2rem等。然而，在实际测试中，由于不同的Vue和Webpack版本，很多这些方式已经无法使用，反而带来了更多麻烦。为了尽快解决问题，我们应该始终以解决问题为导向，首先采用那些已经获得验证并能产生效果的方法。对于上述列举的方案，虽然没有一一测试过，但我们需要明确的是，抓住解决问题的关键。
解决不同分辨率屏幕自适应问题
leaf的博客
11-21 1400
Rem自适应js之精简版flexible.js 来源 ：http://caibaojian.com/simple-flexible.html
一篇文章搞懂！vue中pc端与移动端适配解决方案（亲测有效）
最新发布
djemx2025的博客
06-03 7736
当涉及屏幕适配方案时，我们常常被众多选择所困扰，如postcss-pxtorem、postcss-px2rem、px2rem-loader、postcss-plugin-px2rem等。然而，在实际测试中，由于不同的Vue和Webpack版本，很多这些方式已经无法使用，反而带来了更多麻烦。为了尽快解决问题，我们应该始终以解决问题为导向，首先采用那些已经获得验证并能产生效果的方法。对于上述列举的方案，虽然没有一一测试过，但我们需要明确的是，抓住解决问题的关键。
分页插件，适配PC移动端
11-02
/* * 定义回掉函数 * @param number:跳转页 * */ function pageChange(i) { alert("index is :" + i); Pagination.Page($(".ht-page"), i, 10000, 10); } /* * 初始化插件 * @param object:翻页容器对象 * @param function:回调函数 * */ Pagination.init($(".ht-page"), pageChange); /* * 首次调用 * @param object:翻页容器对象 * @param number:当前页 * @param number:总页数 * @param number:每页数据条数 * */ Pagination.Page($(".ht-page"), 3, 10000, 10);
适配pc
qq_40680142的博客
12-18 248
https://blog.csdn.net/mnhn456/article/details/82344315 vue的适配 https://www.cnblogs.com/yangguoe/p/8260945.html 媒体查询的两个方式 http://www.runoob.com/css/css-rwd-mediaqueries.html @media rem rem是一个低调的c...
网页适配（pc端）
2401_84341495的博客
06-01 1125
静态布局内容在一屏内显示,采用了内容框左右居中的办法,里面的内容绝 对于这个内容框定位。这样一来,在不同大小屏中,内容总是在中 间,看起来较正常。（目前市面上最常见的pc端布局方式）就是为了使网页自适应的显示在不同大小终端设备上的新网页设 计方式及技术，需要开发多套界面来适应不同的终端。自适应是 为了解决如何才能在不同大小的设备上呈现同样的网页。以前自适应布局会开发多套程序，以适配不同的设备大小；不过目前实际开发中，更多的是通过media媒体查询，实现几个关键断点的自适应。
【 pc大屏适配 】大屏适配的方法
weixin_64461654的博客
02-27 678
可视化大屏的适配方法
pc端适配
weixin_60477441的博客
10-10 159
pc端适配
vue项目PC端适配不同分辨率屏幕
03-06
以下是一些关于如何实现“Vue项目PC端适配不同分辨率屏幕”的详细知识点： 1. **响应式设计基础**：响应式设计是确保网站在不同设备上都能正常显示的关键。通过媒体查询（Media Queries）和流式布局（Fluid Grids）...
uniapp+Html5端实现PC端适配
11-19
使用uniapp做的h5页面，在PC端显示时，发现由于upx单位计算基准值太大，导致页面排班布局错乱 思路： 刚开始发现使用px单位不会导致页面布局混乱，但这对刚开启的项目友好，对已经成型的项目修改成本太高，风险也大...
vue实现PC端分辨率适配操作
10-15
本篇文章将详细介绍如何在Vue项目中实现PC端分辨率适配。 首先，适配的关键在于将设计稿上的像素值转换为相对单位，比如rem，以便根据屏幕大小动态调整元素尺寸。在这里，我们采用阿里团队提出的可伸缩布局方案——...
vue实现PC端适配操作
weixin_50754529的博客
04-02 475
vue实现PC端适配操作1、安装两个依赖包： lib-flexible 和 px2rem-loader2、在项目的入口文件 main.js 里引入 lib-flexible3、在build/utils.js进行配置px2remLoader 1、安装两个依赖包： lib-flexible 和 px2rem-loader npm i lib-flexible -S npm i px2rem-loader -D 2、在项目的入口文件 main.js 里引入 lib-flexible import ‘lib-fle
vant - pc端适配(桌面端适配) 记录一下
King Saj
04-15 2660
需求: 页面在pc端打开,使得有些组件不能够在pc端使用. 例如: DatetimePicker组件,在pc端无法进行上下拖动操作的: 解决方案: 官网推荐 安装模块 npm i @vant/touch-emulator -S 在main.js 引入模块后自动生效 // 引入模块后自动生效 import '@vant/touch-emulator'; ...
pc端的适配
一条会流泪的鱼
07-24 460
基于设计图是1920的做的简单的js适配。 <script type="text/javascript"> var winWidth = document.documentElement.offsetWidth || document.body.offsetWidth winWidth = winWidth < 1366 ? 1366 : winWidth var oHtml = document.getElementsByTagName('html')[0] oHtm
pc端做适配
热门推荐
weixin_34000916的博客
01-08 1万+
最近做公司官网，做了适配，总结一下，防止下次做适配的时候在走弯路 步骤 1.确定要做哪些屏幕的适配 目前主流的屏幕有 window系统 1920 1366 其中1920的推荐显示为125% 其宽度为1530 所以1530的兼容也要做 mac系统 1680 1440 1280 1024 2.和需求、ui讨论要做多少套兼容，然后根据讨论结果出设计图 3.根据设计图，搭建框架，做适配 做适配 媒体...
PC端的一些简单适配
小火车况且况且况且的博客
07-06 3401
PC端的一些简单适配
css媒体查询适配pc端
时漂亮的博客
09-02 431
【代码】css媒体查询适配pc端。
vue前端PC网页端适配
qq_46141403的博客
11-03 1176
vuePC端网页适配
媒体查询-PC端和手机端适配
七七的博客
09-13 1285
@media媒体查询，pc端，移动端适配问题
vuepc端适配移动端
12-06
针对Vue PC端适配移动端，可以采用以下两种方法： 1.使用rem单位进行适配 可以使用引用[1]中提到的适配方案，根据浏览器可视区域自适应元素。具体实现方法是将设计稿的尺寸除以一个基准值，然后使用rem单位进行布局。在Vue项目中，可以在main.js中设置一个全局方法，用于计算rem单位的值。示例代码如下： ```javascript function setRem() { const baseSize = 37.5 // 设计稿尺寸除以10 const scale = document.documentElement.clientWidth / 750 // 750为设计稿宽度 document.documentElement.style.fontSize = baseSize * Math.min(scale, 2) + 'px' } setRem() window.addEventListener('resize', setRem) ``` 2.使用postcss-pxtorem插件进行适配 可以使用引用中提到的postcss-pxtorem插件，将px单位自动转换为rem单位。具体实现方法是在vue.config.js中配置postcss-pxtorem插件。示例代码如下： ```javascript module.exports = { css: { loaderOptions: { postcss: { plugins: [ require('postcss-pxtorem')({ rootValue: 37.5, // 设计稿尺寸除以10 propList: ['*'] }) ] } } } } ```
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值