网页自适应

最新推荐文章于 2024-05-23 20:09:14 发布
最新推荐文章于 2024-05-23 20:09:14 发布
阅读量105 收藏
点赞数
分类专栏： HTML 文章标签： html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Xiang_Gong_Ya_/article/details/132579874
版权

自适应

那就要最好提前商量好 是全局自适应 或者是 局部自适应

一般网站页面纵向滚动条都是无法避免的
都是做横向适配也就是宽度
那就不能写死宽度像素

局部自适应
一般对父元素设置百分比就行
里面的子元素就设置固定像素、
比如一些登录

全局自适应

  1. 也就是要对每个元素设置相对单位
  2. 还有就是对全局整个页面进行缩放，在vue项目总就是对app.vue页面进行缩放

自适应的方式一般有

  1. 百分比布局
  2. 用相对单位rem
  3. vh vw
Cc_Debugger
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
如何实现网页自适应布局？
qq_58243060的博客
10-19 5566
如何实现网页自适应布局的？ 1.根据屏幕的大小不同引入不同的css样式文件 <link href="css/css-pc.css" rel="stylesheet" type="text/css" media="screen and (min-width: 1000px)"> 2.响应式设计的步骤 1.设置Meta标签 2.大多数移动浏览器将HTML页面放大为宽的视图（viewport）以符合屏幕分辨率。你可以使用 视图的meta标签来进行重置。下面的视图标签告诉...
css网页屏幕自适应,css自适应宽度 如何让网页自适应所有屏幕宽度
weixin_29811891的博客
08-04 4849
如何设置一个div的宽度为自适应宽度？div里只有文字。感情的戏，小编没演技。这场戏女主角是你而小编只是戏里的一个傻逼。#choise ul li a { display:block; border:1px solid #a0b8cf; padding:2px 4px 2px 4px; margin:3px 1px 6px 1px; } 改为 #choise ul li a { display:b...
网页自适应布局
qq_53663696的博客
03-08 2851
文章目录前言一、主流的框架是如何定义屏幕尺寸范围的（媒体查询）二、几种常见的方法1.Media Query2.meta Viewport3.Resolution4.imagesize5.font-size总结 前言 不同的设备对应不同尺寸的屏幕，如果需要将网页根据用户所持设备进行对应的自适应响应，这时候我们就需要考虑屏幕自适应的设置。 一、主流的框架是如何定义屏幕尺寸范围的（媒体查询） 所有数据来自Bootstrap的官网需要请自行查看。bootcss 设备 大小 手机 小于768p
css 网页自适应方案 大屏自适应方案
海胆的博客
09-20 1万+
rem的方案对于1920及以上分辨率屏幕来说基本适用，但当切换到1366*768等小分辨率时，由于浏览器默认。写死的，也会出现超出画布的问题，因此衍生第二种方案： scale缩放。css 相对单位，相对于根元素的 font-size 值的大小。将设计到的单位转化为rem单位就可以实现等比例的自适应缩放。，所以会导致文字比理想效果更大， 而echarts生成的。直接计算每个像素在设计稿中占据的%来输出vw，rem。比例不对的情况下，画面可能会被压缩。一些图表的自适应方式需要特别处理。DataV 数据大屏。
网页自适应设置
qq_27868533的博客
01-10 2289
网页的自适应说白了就是宽高等随着浏览器窗体变化，那么在讲自适应前先说说设置宽高大小那点小事吧，我们通常设置网页元素是常用的单位有 px、%、em、rem。 px 像素     由于px设置网页元素宽高，元素宽高不会随浏览器窗口大小改变，延展性很差。     建议使用：某些特定的宽高或者属性设置，例如边框的粗细、圆角的程度。     建议不要使用：网页中需要设置宽高的元素不要使用，除
解决Windows系统下网页自适应的方法
YIGE_MO的博客
02-08 1331
解决window系统下网页自适应的终极方法 文章目录解决window系统下网页自适应的终极方法前言一、核心思想？二、使用步骤1.DevicePixelRatio工具类编写2.实际应用总结 前言 很多新手在开发网页的过程中总会遇到一大“毒瘤”–Windows（真是世界第一大流氓）不管你页面写的多规整，在windows的“英明指导下”（windows系统经常推荐用户使用125%、150%比例的缩放窗口，这样导致web页面被进行缩放，除此之外还有人为的按钮缩放。）总会变得混乱不堪。 一、核心思想？ 开发人员
vue项目网页自适应，等比例放大缩小
热门推荐
zxczero的博客
09-19 3万+
vue项目网页自适应，等比例放大缩小
html页面分辨率自适应代码,网页自适应不同浏览器和分辨率_js
weixin_36173034的博客
06-03 2172
上网这么久，曾经不止一次地看到有些网站的首页上醒目地写着”请用Internet Explorer 4.0版本以上浏览器在800×600分辨率下浏览本网站”等字样的文字。可是，我的17英寸的彩显你不能总让我用800×600的分辨率吧。再说了，虽然都说Netscape 6.0没有IE 5.5好，但我也要尝尝鲜呀！哦，原来你的网页在Netscape中这么丑！怪不得……。笔者经过一番研究之后，已经找到了解...
android浏览网页自适应屏幕大小,JS检测移动端自适应屏幕大小
weixin_33603397的博客
05-26 530
PC页面常常在手机上无法正常显示，或页面内容超出屏幕无法看到，或页面排版乱七八糟。今天，米扑博客整理了PC端网页自适应手机屏幕的代码，可以做到自适应手机屏幕宽度。在网页的中增加一个meta标签，可以让网页的宽度自动适应手机屏幕的宽度。其中：width=device-width ：表示宽度是设备屏幕的宽度initial-scale=1.0：表示初始的缩放比例minimum-scale=0.5：表示最...
手机网页自适应手机版
06-10
电脑上网页自动适应手机触屏wap版网页的尺寸
jQuery网页自适应屏幕图片滚动切换
10-27
jQuery网页自适应屏幕图片滚动切换 jQuery网页自适应屏幕图片滚动切换
网页自适应手机以及各种屏幕
03-01
网页自适应手机以及各种屏幕，开发介绍自我判断信息，学习进步，自己看着办吧，
Web前端开发技术、详细文章、（例子）html 列表、有序列表、无序列表、列表嵌套
jingyu飞鸟
05-20 848
为首标记，以...
前端基础入门三大核心之HTML篇：深入解析PNG8、PNG16、PNG24与PNG32的差异及网页应用指南
最新发布
一个做过前端开发的产品经理，经历过睿智产品的折磨导致脱发之后，励志要翻身"农奴"把歌唱，一边打入敌人内部一边持续提升自己，为我们广大开发同胞谋福祉，坚决抵制睿智产品折磨我们码农兄弟！
05-23 554
理解PNG格式的不同变体及其适用场景，是前端开发者必备的基础技能之一。通过合理的选用，不仅能提升网站的视觉效果，还能确保良好的性能体验。在实际工作中，你还遇到过哪些关于图像格式选择的挑战？或是有独到的优化策略？欢迎在评论区分享你的见解和经验，让我们一起探讨前端图像优化的更多可能性。欢迎来到我的博客，很高兴能够在这里和您见面！希望您在这里可以感受到一份轻松愉快的氛围，不仅可以获得有趣的内容和知识，也可以畅所欲言、分享您的想法和见解。DTcode7的博客首页。
前端基础入门三大核心之HTML篇：解密标签、标题与段落的艺术
一个做过前端开发的产品经理，经历过睿智产品的折磨导致脱发之后，励志要翻身"农奴"把歌唱，一边打入敌人内部一边持续提升自己，为我们广大开发同胞谋福祉，坚决抵制睿智产品折磨我们码农兄弟！
05-18 1061
标题标签从到，分别代表六个不同的层级，最为重要，则较为次要。合理使用标题不仅有助于内容结构化，也有助于SEO。
HTML想见你
兔子王
05-23 1344
这一次，就让小编用html语言绘制一场雪中的相遇，送给屏幕前的黄雨萱和李子维们。
如何理解HTML语义化
2402_84885073的博客
05-17 334
HTML提供了许多具有明确语义的标签，如、、、、等，这些标签能够清晰地表达页面内容的结构。尽量避免使用无具体语义的标签（如、等）进行无意义的包裹，而是使用具有明确语义的标签来描述页面元素。对于需要强调的文本，可以使用（斜体）或（加粗）标签来替代和标签，以增加文本的语义性。避免使用纯样式标签（如、、等），而是使用CSS来设置元素的样式。
html网页自适应窗口
08-15
- *1* *2* [HTML网页自适应以及清除浮动](https://blog.csdn.net/weixin_40196539/article/details/93298463)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值