PC端自适应固定比例居中

最新推荐文章于 2024-07-17 15:26:15 发布
最新推荐文章于 2024-07-17 15:26:15 发布
阅读量184 收藏
点赞数 2
文章标签： 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/WoNiuDeXiaYiYe/article/details/139971381
版权 
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body style="margin: 0 auto;">
		<div style="width: 100%;height: 1px;display: flex;align-items: center;justify-content: center;align-content: flex-start;flex-wrap: wrap;margin: 0 auto;">
			<div style="width: 50%;height: 40vh;background-color: #9f5151;">
				
			</div>
		</div>
	</body>
</html>

可以嵌入vue 的app
在这里插入图片描述

蜗牛猫软件开发工作室
关注
  • 2
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
uniapp适配pc_uni-app H5 平台在 PC 端实现适配
weixin_39936792的博客
12-20 6051
该文章已过时，请忽视。从 uni-app 2.9 起，官方已提供了 PC 等宽屏的适配方案。使用 uni-app 开发的 H5 页面，为了根据屏幕宽度自适应，我们一般都采用官方推荐的动态单位 rpx，但是在 PC 端展现的时候可能出现文字等相关元素太大，导致页面错乱或不美观。为了解决该问题，我们可以限定页面最大宽度，超过就固定宽度，并居中显示。比如 笔者 要开发一个 uni-app 应用，在 PC...
PC端和移动端自适应问题的快速解决方法
09-24
如何解决PC端和移动端自适应问题？下面小编就为大家带来一篇PC端和移动端自适应问题的快速解决方法。希望对大家有所帮助。一起跟随小编过来看看吧，祝大家游戏愉快哦
PC端自适应-rem
majingjing1314的博客
08-26 548
是指相对于根元素字体大小的单位，一个相对单位。rem可以做到随着根元素的字体大小随之变化，达到自适应屏幕的效果。设置这个值，谷歌浏览器不会受影响，当是IE浏览器等时，会受影响，根据实际去调整值。可以使用媒体监听，也可以使用动态js计算，本文因为不确定自适应数量使用动态计算。每个单位大小用实际值除以100得到相对的。代表宽度是设备宽度，同时不允许缩放。
网页自适应pc端和移动端
lvyang251314的博客
09-11 3745
手机的屏幕比较小，宽度通常在600像素以下；PC的屏幕宽度，一般都在1000像素以上（目前主流宽度是1366×768），有的还达到了2000像素。同样的内容，要在大小迥异的屏幕上，都呈现出满意的效果，并不是一件容易的事。  于是，网页设计师不得不面对一个难题：如何才能在不同大小的设备上呈现同样的网页？ 下面让木易设计来告诉大家。   很多网站的解决方法，是为不同的设备提供不同的网页，比如专门...
一套web代码自适应pc端以及手机端的几种解决方法
欢欢的博客
07-11 5944
最近遇到一个很棘手的项目，自作聪明想使用自己的一套方法自适应手机端和PC端，造成了不小错误，特地从网上学习了一下，现在把学习到的跟大家分享一下 手机的屏幕比较小，宽度通常在600像素以下；PC的屏幕宽度，一般都在1000像素以上（目前主流宽度是1366×768），有的还达到了2000像素。同样的内容，要在大小迥异的屏幕上，都呈现出满意的效果，并不是一件容易的事。 很多网站的解决方法，是为不同的设备提供不同的网页，比如专门提供一个mobile版本，或者iPhone / iPad版本。这样做固然保证了效果，但是
使PC端网页宽度自适应手机屏幕大小
热门推荐
lzqial1987的专栏
11-26 3万+
有时候我们会纠结PC页面在手机页面上无法正常显示，超出屏幕，有些内容看不到，现在又了下面的代码，可以做到自适应手机屏幕宽度： 在网页的中增加一个meta标签： 可以让网页的宽度自动适应手机屏幕的宽度。 其中： width=device-width ：表示宽度是设备屏幕的宽度 initial-scale=1.0：表示初始的缩放比例 minimum-scale=
element UI中设置图片的高度并支持PC和手机自适应
wyqshusan的博客
04-01 985
在使用Element UI时，可以通过样式覆盖来实现图片的高度在PC和移动端的自适应，可以使用CSS媒体查询来为不同的屏幕尺寸设置不同的样式。
css 使富文本编辑器中的内容 在手机端自适应
葬爱家族王富贵
11-15 1万+
荆轲刺秦王 我们在做网站的时候 经常会遇到  这样的情况：网站的内容是 cms 系统后台用 富文本编辑器 填充的，这个时候，就有一个问题：当屏幕分辨率变成 750px 以下，也就是手机端的时候，后台用富文本编辑器填充的内容样式就会变化，最重要的是，在富文本编辑器里面添加的图片就会错位。我么来分析一下： 通常情况下，在 富文本编辑器 添加的内容一般都会自带一些 html 和 css  ，这就导致...
Vue项目PC端屏幕适配
yuangegena_Blog
02-08 2485
根据项目的设计图 版心一般情况下居中且宽度在1200px然后背景图根据屏幕自适应大小，在小屏的笔记本等设备上就会导致页面显示不全。 接下来是处理。。。 1.新建device.js文件。 class devicePixelRatio { constructor() { //this.flag = false; } //获取系统类型 getSystem() { let flag = false; var agent = navigator.userAgent.toLowerCase
pc css框架,PC端框架—semantic ui
weixin_39595271的博客
08-03 282
顾名思义 这是一款语义化的UI框架，代码可读性与可理解性很强，界面简洁美观，与bootstrap风格接近，基于jquery，适用响应式布局，提供一些基本模板，兼容Firefox、Chrome、safari,IE 10+等浏览器。使用方法引入js与css文件:使用:给元素添加对应class即可使用相关组件，若需使用相关组件的动态效果 如tab切换，下拉等，使用相关元素调用对应的js即可；semant...
移动端+pc端自适应适配解决方案
06-29
适用于前端H5 pc端的适自创适配方案，有效解决各个尺寸适配，根据浏览器可视区域自适应元素，使用方法：将资源下载下来，放入单独js文件中，独立写成一个全局方法，如果是vue项目就在main.js中引入。如果是原生js...
pyecharts自适应居中显示
04-22
修改python安装目录下，\Lib\site-packages\pyecharts\render\templates文件夹里的macro和simple_chart.html 适配生成的html居中显示并自适应浏览器窗口
影视站源码，独立后台，PC 端，手机端自适应
03-01
影视站源码，独立后台，可修改，可定制，灵活性强，PC端，手机端自适应，功能不断添加中，目前版本为7.2最新版，采用E-CDN加速技术，imageszip技术，XML高速接口技术，H-Speed解析加速技术等，大大的提高了站点运行...
大图片根据分辨率自适应宽度仍居中显示
12-13
问题：一个1920*900的大图，在1024*768的分辨率只能显示一部分，希望仍居中显示 解决方案CSS: 复制代码代码如下:width: 100%; background-position: 50P%; 示例code：  复制代码代码如下:<style> body { ...
Web前端-Web开发CSS基础6-弹性盒子
a15735748145a的博客
07-16 1108
10. stretch，这意味着弹性盒子在布局的时候，不论是一行一行地布局，还是一列一列地布局，垂直方向上的各元素都将会自动扩展，以填满父元素的高度。11. stretch，这意味着弹性盒子在布局的时候，不论是一行一行地布局，还是一列一列地布局，垂直方向上的各元素都将会自动扩展，以填满父元素的高度。12. stretch，这意味着弹性盒子在布局的时候，不论是一行一行地布局，还是一列一列地布局，垂直方向上的各元素都将会自动扩展，以填满父元素的高度。
TinyVue v3.17.0 正式发布，推出了一款基于 Quill 2.0 的富文本编辑器，功能强大、开箱即用！
最新发布
OpenTiny的博客
07-17 662
本文由体验技术团队Kagol老师原创~我们非常高兴地宣布，2024年6月26日，TinyVue 发布了 v3.17.0 🎉。TinyVue 每次大版本发布，都会给大家带来一些实用的新特性，上一个版本我们重构了 chart-core，新增 CircleProcessChart 圆环进度图等6个新的图表组件，并增加了 Statistic 数据统计组件。表格图片超链接复制粘贴插入表情文件上传@提醒斜杆菜单v-auto-tip。
cookies,sessionStorage和localStorage都有什么区别
qq_51856496的博客
07-17 109
cookies,sessionStorage和localStorage都有什么区别 cookies在请求数据传输的时候会携带至后台，sessionStorage,localStorage是纯客户端缓存 cookies有过期机制,sessionStorage是会话级缓存，窗口关闭后会销毁，localStorage是本地持久缓存手动才会清除 cookies只能存储4KB并且不推荐前端用js直接操作，sessionStorage,localStorage存储有5MB
(三)js前端开发中设计模式之工厂模式
峰会路转的博客
07-17 140
工厂模式是一种创建型设计模式，它可以帮助我们根据需求创建对象。
pc端网页自适应不同比例的屏幕
07-14
要实现PC端网页的自适应，可以采用以下方法： 1. 使用CSS的百分比单位：使用百分比来设置元素的宽度、高度和边距，使其相对于父容器的尺寸进行调整。 ```html ;"> <!-- 内容 --> ``` 2. 使用CSS的`max-width`...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值