页面自适应设置--屏幕适配

最新推荐文章于 2024-10-10 10:18:51 发布
最新推荐文章于 2024-10-10 10:18:51 发布
阅读量776 收藏 1
点赞数
分类专栏： JavaScript 文章标签： css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Ain_z/article/details/111769148
版权
本文介绍了如何通过在HTML中添加代码以及CSS样式来实现页面自适应，确保内容在不同屏幕尺寸下都能良好展示。
摘要由CSDN通过智能技术生成

页面自适应

在html中进行页面自适应

在head中加入下面代码

 <script>
        if (window.innerWidth <= 600) {
   
            let html = document.getElementsByTagName('html')[0
最低0.47元/天 解锁文章
红色制作
关注
专栏目录
电脑不同屏幕自适应布局
weixin_42066070的博客
09-14 360
个人笔记，不想看勿喷，本人这个专栏会一直更新。只要是开发中容易遇到的问题都会发在这个专栏，物超所值。
前端自适应布局-带文字图片的自适应
gongzhonghua的博客
06-19 3443
最近项目中需要实现一个banner，如图所示.（设计图稿为1680*412） 当前实现的思路： div(position:relative;width:100%;height:412px;)>ul >li>a>img (width:100%;height:412px) 问题：平铺桌面但文字会被挤压 这个时候，产品给出了一个参考效果,见链接.https...
网页屏幕自适应
qq_41214595的博客
04-01 1394
方法一.利用table布局 利用table布局，并且将元素宽度以百分比形式显示，高度可用px显示。 【不适用绝对宽度,可以用px指定它的高度，但是不要用px指定它的宽度】。 设置包裹着很多子元素【id=tableContainer】的div标签css，让它的布局【display：table；】为表格形式，宽度为【width：100%】充满屏幕，如下图所示： ...
页面自适应<meta name="viewport">标签设置
weixin_34357928的博客
05-16 219
viewport： 它在页面中设置，是应对手机模式访问网站、网页对屏幕而做的一些设置。通常手机浏览器打开页面后，会把页面放在一个虚拟的“窗 口”–这个比窗口大，也就是你常发现页面可以进行拖动、放大放小，这个窗口即viewport，meta的这个viewport属性基本所有手机浏览器皆支持。 <meta name="viewport" content="width=device-wi...
让页面自适应屏幕
yuntian1995的博客
04-09 605
贴代码 'use strict'; /** * @param {Number} [baseFontSize = 100] - 基础fontSize, 默认50px, 对于iPhone的设计稿, 1rem=100px; 方便裸算rem; 有的是16px, 用浏览器默认; * @param {Number} [psdWidth = 750] - 设计稿默认宽度, 以750为基准; */ ...
根据屏幕大小内容自适应大小（不是响应式）
m0_49789433的博客
05-19 228
根据屏幕百分百自动缩放内容（直接调用方法即可，我是在vue里面mounted调用的） autoSize: function () { // 自适应缩放比例 let html = document.getElementsByTagName('html')[0]; let width = 1600; let height = width * html.clientHeight / html.clientWidth; let zoom = html.c
手机端自适应项目-ui设计稿.zip
03-25
1. 响应式布局：这是自适应设计的核心，通过使用流式布局、媒体查询等技术，让页面元素能够根据屏幕宽度自动调整大小和位置，确保内容在任何设备上都能清晰呈现。 2. 视口管理：移动设备的视口不同于桌面，设计师...
网站模板-时尚视觉设计自适应网页模板-适配移动端界面-HTML源码.zip
03-25
它采用了前沿的HTML5和CSS3技术，实现了响应式设计，能够无缝适配各种设备的屏幕尺寸。此外，它还内置了丰富的JavaScript插件，助您轻松实现各种复杂的交互效果。这套源代码文件具有极高的可定制性，您可以根据您的...
HTML5 移动页面自适应手机屏幕四类方法总结
09-27
以下是实现移动页面自适应手机屏幕的四类方法的详细介绍： 1. 使用Viewport Meta标签 viewport是用户网页的可视区域，通过meta标签中的viewport指令可以控制页面的尺寸和缩放比例。这在移动端开发中是一个普遍采用...
浅谈页面自适应
zhongshanxian的博客
06-29 2508
      在实习过程中，我参与开发了一个大屏模块，这个模块主要利用了Vue和Echarts。大屏需要展示很多东西，一个大屏模块里面通常包含七、八个小模块。而且要在1366*768的小屏中完全展示，要与窗口的调节同步自适应。因此，在这个模块的开发过程中，难点在于自适应布局。      页面的自适应主要有两种，一种是同一个页面在手机端和pc端的自适应，另一个则是pc端改变浏览器窗口的自适应。一、同一...
让页面部局随浏览器窗口自适应
一路前行
12-08 905
首先使最外围的容器随窗口变化，然后再定义内部的各组件。 window.onresize = function() {    Ext.getCmp('gridId').setWidth(document.documentElement.clientWidth); //修改最外层容器的宽度     var w = document.documentElement.clientWidth;    ...
页面自适应
spicyIsPleasant的博客
04-29 193
方法一 使用vw或vmax代替px 注：IE浏览器内核不支持vmax
前端页面自适应的7种办法
mao871863224的博客
04-11 5109
项目开发中经常遇见需要自适应页面的办法，下面总结几种经常用到的，欢迎补充～
网页自适应电脑版手机版自适应
最新发布
weixin_72299343的博客
10-10 519
网页自适应（Responsive Web Design，简称RWD）是一种网页设计和开发的方法，它使得网页能够自动适应不同尺寸的屏幕，包括电脑、平板电脑和手机。也就是说，无论用户使用什么设备访问你的网站，都能获得最佳的浏览体验。以下让你来更清楚了解网页自适应就拿bootstrap来说，这是在手机版看到页面的情况这个就类似平板这样的尺寸这个便是我们电脑版的情况。
【Vue2 pc端项目不同分辨率屏幕窗口自适应】
qq_48573827的博客
11-10 1301
可以直接将下面代码放到main.js文件中，也可以单独写一个js文件，然后在main.js 中挂载。postcss-pxtorem 插件会将页面中的px像素单位，经过计算然后改写成rem，配置完成以后 就会将项目中写的500px像素单位转写成31.25rem单位。我这边是按照1920的尺寸设置，可以根据实际大小设置。在项目中根据原型图上的数据单位来进行样式编辑就可以。至此窗口自适应大小就配置完了。
html 手机浏览器：屏幕适配 - 代码篇
草巾冒小子的博客
05-25 1165
重要代码： <!-- apple强制全屏，显示在状态栏下方 --> <meta name="apple-mobile-web-app-capable" content="yes" /> <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" /> <!-- UC默认竖屏 ，UC强制全屏 --> <meta name="full-screen" conte
手机端网页自适应声明
foreverlikui的博客
07-26 1599
如果HTML页面声明中少了下边这句话， 页面将出现这样 添加进去之后
HTML页面宽度自适应
zisetoufa
03-28 947
width - viewport的宽度 height - viewport的高度 initial-scale - 初始的缩放比例 minimum-scale - 允许用户缩放到的最小比例 maximum-scale - 允许用户缩放到的最大比例 user-scalable - 用户是否可以手动缩放 我写的那个页面因为是要在手机上显示，所以比例都设置为了0.5 ...
pc端如何做自适应呢？
h960822的博客
02-29 976
- 5 因为我们量尺寸都是基于设计稿去量的 所有我们要将pxtorem的尺寸进行修改 在设置里面找到修改尺寸的地方也就设计稿的尺寸1920/24 = 80 -->那么随着屏幕不断发生变化的时候 屏幕的fonst-size的大小就是当前屏幕的尺寸/24了 -->-- 想要实现自适应的前提条件是 当浏览器的窗口发生变化的时候， html的font-size将会跟着发生改变 -->-- 默认html的font-size的大小是16px 1rem = 16px -->-- 实现的步骤如下 -->
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值