1、控制横向和纵向滚动条的显隐？<body style=”overflow-y:hidden”> 去掉x轴<body style=”overflow-x:hidden”> 去掉y轴<body scroll=”no”>不显2、表格变色<TD onmouseover=”this.style.backg
转载
2024-05-24 20:17:36
215阅读
自适应,流动布局，响应式布局
CSS的属性：用浏览器自带的审查元素对一些页面进行调整，快捷键是F12.网页允许宽度自适应：在代码的头部加入一行viewport元标签。<meta name="viewport" content="width=device-width,initial-scale=1"/>所有主流浏览器都支持这个设置，包括IE9。
转载
2023-09-17 14:30:38
540阅读
1.前言spa页面的layout布局对于前端项目的影响至关重要，在我们进行web端开发的时候，前端的各种大小屏幕，各种内核的浏览器不同，会导致我们的页面呈现出不一样的效果，如何进行更好的取舍，怎么能够达到产品对于系统展示效果的满意度，其实我们要前端有一套布局理念，这种理念指导我们如何进行优雅布局，怎么才能不被不合理的需求左右。理念分为以下几点：整体布局，上左右风格，或者上下风格符合或者复杂的上菜单
转载
2024-04-03 09:27:33
1837阅读
文章目录一、通过 CSS：background-image方法一尝试：background-position: 0 0;（OK）方法二尝试：background-size: cover;【可采用】二、通过 img 标签（OK）思路 1、img标签动态绑定宽度（:width="fullWidth"）【可采用，较好】思路 2、在动态绑定宽度（:width="fullWidth"）之后，想方法剪掉多余
转载
2024-04-21 11:42:32
184阅读
自适应网页设计很受欢迎，它绝对没有隐藏。这是专家们呼吁，很多品牌正在转换的一种形式。让同一张网页自动适应不同大小的屏幕，根据屏幕宽度，自动调整布局，无论是通过电脑，平板或智能手机。下面有一些关于自适应 网页设计的建议。 1 使用优秀的排版 自适应设计的网站，你要考虑的是怎么在一个小屏幕上很好看。良好的排版是任何好的网页设计的主食，但它在自动适应网页中是必要的。随着屏幕尺寸的减少，大部分的元素应该改变，缩小或移动。首先，你的排版应该有这个能力。 其次，你应该在文本中使用不同的标题和各种尺寸。现在，我们通常会在我们的台式机上设计的非常大型的头条新闻和标题。这个应该停止，因为你需要考虑较小...
转载
2013-08-10 00:13:00
210阅读
2016-06-22 18:39:57标签：响应式网页随着3G的普及，越来越多的人使用手机上网。移动设备正超过桌面设备，成为访问互联网的最常见终端。于是，网页设计师不得不面对一个难题：如何才能在不同大小的设备上呈现同样的网页？手机的屏幕比较小，宽度通常在600像素以下；PC的屏幕宽度，一般都在1000像素以上（目前主流宽度是1366×768），有的还达到了2000像素。同样的内容，要在大小迥异的屏
转载
精选
2016-07-07 10:49:09
549阅读
自适应网页设计（Responsive Web Design）作者： 阮一峰日期： 2012年5月 1日随着3G的普及，越来越多的人使用手机上网。移动设备正超过桌面设备，成为访问互联网的最常见终端。于是，网页设计师不得不面对一个难题：如何才能在不同大小的设备上呈现同样的网页？手机的屏幕比较小，宽度通常在600像素以下；PC的屏幕宽度，一般都在1000像素以上（目前主流宽度是1366×768），有的还
转载
精选
2014-02-24 20:34:24
478阅读
随着3G的普及，越来越多的人使用手机上网。移动设备正超过桌面设备，成为访问互联网的最常见终端。于是，网页设计师不得不面对一个难题：如何才能在不同大小的设备上呈现同样的网页？手机的屏幕比较小，宽度通常在600像素以下；PC的屏幕宽度，一般都在1000像素以上（目前主流宽度是1366×768），有的还达到了2000像素。同样的内容，要在大小迥异的屏幕上，都呈现出满意的效果，并不是一件容易的事。很多网站
原创
2015-06-14 22:27:20
559阅读
随着3G的普及，越来越多的人使用手机上网。移动设备正超过桌面设备，成为访问互联网的最常见终端。于是，网页设计师不得不面对一个难题：如何才能在不同大小的设备上呈现同样的网页？手机的屏幕比较小，宽度通常在600像素以下；PC的屏幕宽度，一般都在1000像素以上（目前主流宽度是1366×768），有的还达到了2000像素。同样的内容，要在大小迥异的屏幕上，都呈现出满意的效果，并不是一件容易的事。很多网站
转载
精选
2016-06-22 18:39:57
598阅读
CSS3方案:利用视口单位适配页面对于移动端开发来说，最为重要的一点是如何适配页面，实现多终端的兼容，不同的适配方式各有千秋，也各有缺点。就主流的响应式布局、弹性布局来说，通过 Media Queries 实现的布局需要配置多个响应断点，而且带来的体验也对用户十分的不友好：布局在响应断点范围内的分辨率下维持不变，而在响应断点切换的瞬间，布局带来断层式的切换变化，如同卡带的唱机般“咔咔咔”地一下又一
转载
2024-05-24 12:31:16
560阅读
方案一：使用 scale-box 组件属性：
width 宽度 默认 1920
height 高度 默认 1080
bgc 背景颜色 默认 "transparent"
delay自适应缩放防抖延迟时间（ms） 默认 100
vue2版本：vue2大屏适配缩放组件（vue2-scale-box - npm）npm insta
转载
2024-03-18 18:56:20
1899阅读
问题：当前市场上手机屏幕宽度不尽相同，常见有320px（ipone5）、375px（ipone678）等等，而为了在不同宽度的手机屏幕上良好现显示网页，我们需要解决方案。原理：当前前端解决手机屏幕自适应的手段极多，究其原理，主要分为两大版块： 一、使用百分比长度单位，当前百分比长度单位一般如下：vw、vh、vm、em、rem、%，优点：一套css代码即可适应所有屏幕宽度不同的手机； 二、使用固
转载
2024-09-30 23:06:07
52阅读
安装lib和px2rem之后在build的utils中配置即可先使用vue脚手架初始化一个webpack项目vue init webpack 项目名项目初始化好了之后，进入项目目录中 (cd 项目名) 安装 li...
转载
2020-06-10 15:30:00
790阅读
2评论
vw布局相信大家都只了解一些，1vw相当于屏幕百分之一的宽度,这里介绍的一个方法是通过一些依赖，让你在vue-cli开发移动端放心的使用px，闲话不多说，上干货了。首先，安装 postcss-px-to-viewport，这玩意就是核心 看名字很容易看出用途吧，把px转换成vwnpm
转载
2024-07-07 12:33:36
146阅读
需求：是实现全局页面中字体自适应。警告：下面实现主要是在Vue中进行配置的，把全局中的px转换成rem进行实现自适应窗口变化。一、实现方式：1、下载所需插件pnpm install lib-flexible-computer -S
pnpm i px2rem-loader -D
pnpm install postcss-px2rem-exclude -D2、在main.js进行全局引入impor
转载
2024-04-03 15:50:23
532阅读
一、允许网页宽度自动调整
"自适应网页设计"到底是怎么做到的？其实并不难。
首先，在网页代码的头部，加入一行viewport元标签。<meta name="viewport" content="width=device-width, initial-scale=1" />
viewport是网页默认的宽度和高度，上面这行代码的意思是，网页
传统的网站如何完成向移动设备的快速转型？ 通过移动适配技术可以实现，切图网是国内首家基于web技术服务的公司，而移动适配主要通过底层的web技术开发手段来完成，下面切图网将从技术角度来告诉你通过7个步骤来完成一个PC网站向移动设备的跳跃！1允许网页宽度自动调整“自适应网页设计”到底是怎么做到的？其实并不难。首先，在网页代码的头部，加入一行viewport元标签。viewport是网页默认的宽度和高
转载
2024-01-09 07:58:18
363阅读
自适应网页即是响应式网页，所谓的响应式网页就是，同样的一个网址，在电脑，平板，手机浏览的时候，样式更着改变，这就是简单的一个解释，更合理的解释就是，网页根据屏幕的大小会变得自适应，就会让网站看起来很自然。同样可以根据屏幕分辨率展示或者移除某些元素块。使在窄屏中简化网页，在宽屏中充盈网页，使其看起来更加美观。
之前我的网站都是基于我自己的电脑屏幕分辨率1366×768设计而来，所以对于一些
转载
2024-07-21 16:39:45
22阅读
允许网页宽度自行调整在网页代码头部加入一行viewport标签1. <meta name="viewport" content="width=device-width, initial-scale=1" />viewport是网页默认的宽度和高度，上面这行代码的意思是，网页宽度默\认等于屏幕宽度（width=device-width），原始缩放比例（initial-scale=1）为1
转载
2023-12-21 20:25:15
236阅读
前言： 大神估计就没必要看了吧，新手淌水，大神勿喷，欢迎留言交流。 背景： （如果着急，可以直接下拉看最后一个遂。） vue项目1个，使用ruoyi-vue框架 前端小白1个，仅仅停留在能实现功能的层次，如果你问我vue是什么，我只能告诉你三个字 => "前端框架"。 在vue项目中，多个echar ...
转载
2021-08-17 16:20:00
595阅读
2评论
