vw移动端适配

Vue+Vux 移动端自适应开发模板(附源码)

Vue-Moblie-Templet-For-Vux这是一个Vue结合Vux开发移动的端的模板，并且用了vw的自适应解决方案,模板已经解决了转换css大小单位为vm时,把Vux中的css单位也处理，导致
PowerDos·2023-07-30 00:43

简单速记-px2vw

px2vw--------css单位转换为了移动端适配，我们可以使用postcss-px-to-viewport插件来进行px-vw的单位转换文档指路------>GitHub安装postcss-px-to-viewportnpminstallpostcss-px-to-viewport
长鲸向南·2023-07-30 00:09

H5移动端适配 rem 和 vw 的区别

当我们做H5移动端项目或移动官网时，要求要根据不同机型做等比例缩放一、rem适配rem是相对单位，是相对HTML根元素的font-size来决定它的大小，1rem就等同于html标签font-size的大小。所以rem的适配就是去调整html标签的font-size，所有使用rem单位的元素就会自动跟随着发生变化。1、实际案例说明：设计师给到的设计稿是按750px的标准来设计的设计稿上一个div的
前端.攻城狮·2023-07-29 20:25

vue2.x 的移动端适配

vue2.0的移动端适配1.安装[email protected].安装[email protected].创建
无上星空·2023-07-29 20:24

CSS进阶之移动端适配 (四)：媒体查询、CSS常见单位、深入理解pixel、DPR、PPI、浏览器视口Viewport、移动端适配rem方案、移动端适配vw方案

跳转目录篇章知识点CSS进阶之形变与动画(一)transform、垂直居中总结、transition动画、animation动画、vertical-alignCSS进阶之预处理语言之less(二)Easyless插件、认识less、注释、计算方式、嵌套、变量的定义导入less文件、从less导出css样式的路径CSS进阶之grid网格布局(三)关于grid布局、grid-container属性、g
AHuSjCoding·2023-07-29 20:23

移动端适配rem

1.安装amfe-flexible和postcss-pxtorem，[email protected](这里我使用的postcss-pxtorem是5.1.1版本)或者在pageage.json中写入"amfe-flexible":"^2.2.1","postcss-pxtorem":"^5.1.1",然后重新安
周亚鑫·2023-07-29 20:51

微信小程序

微信小程序.json全局配置app.jsonsitemap.json模板WXSS弹性盒子布局flexvh、vw高斯模糊filter微信开发者工具快捷键三级目录WXML双花括号组件通用属性viewinputslider
豆瓣鸡·2023-07-29 08:44

vw移动端适配 与 vant 集成 导致 vant组件缩小如何解决？

修改.postcsssrc.js中关于postcss-px-to-viewport的selectorBlackList忽略转换的配置可解决问题，配置如下module.exports={"plugins":{"postcss-import":{},"postcss-url":{},"postcss-aspect-ratio-mini":{},"postcss-write-svg":{utf8:fal
趣有书·2023-07-28 20:10

纯CSS水滴效果

效果图Document*{margin:0;padding:0;box-sizing:border-box;}body{width:100vw;height:100vw;display:flex;justify-content
SchizophreniA6·2023-07-28 12:53

CSS通过设置filter实现元素交融效果

Document*{margin:0;padding:0;}body{width:100vw;height:100vh;}.parent{position:relative;filter:contrast
Agwenbi·2023-07-28 10:37

CSS Sprite精灵图如何缩放大小

在移动端项目当中，如果要使用精灵图的话，因为我做了px自动转换vw单位，所以在使用的时候，position位置正常写单位是px，但是转化成vw后就找不到对应的图片了"postcss-px-to-viewport
xuanwulb·2023-07-28 08:41

vue 移动端完整项目搭建（一）前言

2.所涉及的技术和框架有:1.vue-cli搭建vue项目；2.前端适配方案采用大漠老师的vw适配方案；3.前端ui框架采用有赞移动端组件库Vant,并配置按需引入；4.采用less为css的预编译语言
Alter_c474·2023-07-28 04:09

react实现自动定位

react接入腾讯地图自动定位自动定位*{margin:0;padding:0;}#app{width:100vw;height:100vh;}.mapWrapper{/*地图(容器)显示大小*/width
HarryDeveloper·2023-07-27 21:45

vue项目postcss-px-to-viewport自动适配各种分辨率，px单位自动转vw单位，脚手架cli2.0、cli3.0、cli4.0配置方法汇总

背景介绍：有个项目需要适配pc端的多种分辨率，我想到了px单位自动转vw的插件，但是我的项目脚手架用的是cli3.0的版本，我引入postcss-px-to-viewport后一直无法生效，找了很多地才找到
银鞍照白马·2023-07-27 06:04

【转载】11种垂直居中的方法

原文：CSS垂直居中的正确打开方式image.png这是垂直居中的元素居中元素宽高已知1.absolute+marginauto.parent{position:relative;width:90vw;
优秀的收藏转载分享·2023-07-27 00:55

移动端适配

目前移动端页面的载体主要是微信和浏览器，虽然2倍屏是按7501334的设计图做的，但是考虑微信/浏览器都有状态栏高度，浏览器底部可能还得考虑去掉工具栏的高度，为了便于统一，我们目前只考虑微信的可用页面高度iPhone6的设备像素是375667页面可用像素为7501206，所以设计图的目前设计标准应为7501206hotcss(https://github.com/imochen/hotcss/bl
singleShadow·2023-07-26 09:07

【H5】h5移动端适配

一、百分比适配1、要点元素的宽度使用了百分比来定宽，根据屏幕的宽度进行自适应适合页面内容结构均匀分配,固定高度,结构不是很复杂,注意要设置viewport视口内容宽度等于设备的宽度使用百分比定宽的元素，百分比参考的是该元素最近的，定了宽度的父元素2、示例固定高度,宽度自适应,100%比做适配*{padding:0;margin:0;}body{font-size:16px;overflow:hid
小墨鱼_z·2023-07-26 08:53

vue 移动端适配flexible.js使用方法

原理：flexible.js适配方案采用rem布局，根据屏幕分辨率大小不同，调整根元素html的font-size,从而达到每个元素宽高自动变化，适配不同屏幕操作步骤：1.安装lib-flexible.jsnpminstalllib-flexible--save2.在项目入口文件main.js中引入lib-flexibleimport'lib-flexible/flexible'解释：lib-fl
你别说话了·2023-07-26 03:30

rem移动适配解决方案及flexible.js插件使用

企业常用移动适配解决方案：即实现在不同宽度的设备中，网页元素尺寸等比缩放效果rem：目前多数企业在用的解决方案vw/vh：未来的解决方案及趋势本文将阐述rem适配方法rem单位Ø相对单位Ørem单位是相对于
黄马小配件·2023-07-26 03:56

vue pc响应式+移动端适配flexible.js的使用方法

前段时间写了一个官网,需要适配pc端和移动端,同时在pc端需要响应式,一套代码完成多端适配.最后选择了使用flexible.js完成移动端的适配方案.首先我们来了解一下关于flexible.js:原理：flexible.js适配方案采用rem布局，根据屏幕分辨率大小不同，调整根元素html的font-size,从而达到每个元素宽高自动变化，适配不同屏幕.1.首先在utils中创建一个flexibl
裴徊光的小娇娇·2023-07-26 03:52

pc端富文本编辑的字符串在手机端适配

constZPXRegExp=/(\d+)px/;letpxGlobalRegExp=newRegExp(ZPXRegExp.source,'ig')if(pxGlobalRegExp.test(str)){//px转换vw
cuiyuchen111·2023-07-26 01:45

微信小程序瀑布流组件

1.创建文件夹/components/waterfall/文件夹结构如图各文件内容：.wxml.wxss.waterfallView{width:100vw;height:100vh;padding:2%
某公司摸鱼前端·2023-07-24 22:29

前端面试题 —— CSS （二）

六、对CSS工程化的理解七、如何判断元素是否到达可视区域八、如何根据设计稿进行移动端适配？九、响应式设计的概念
大红袍不是绿茶.·2023-07-24 15:59

滚动条样式

//滚动条样式盒子::-webkit-scrollbar{/*滚动条整体样式*/width:px2vw(7);/*高宽分别对应横竖滚动条的尺寸*/height:px2vh(1);}盒子::-webkit-scrollbar-thumb
努力学习的小瑶·2023-07-24 05:49

二十二、移动端页面练习1

目录：1.准备工作2.编写头部一、准备工作html页面爱学习css项目使用less，所以创建style.less，然后选中vw来做适配。
gaoya7305·2023-07-24 05:05

二十一、vm 适配

解决：vw的适配（在js不参与的情况下，用vw是最好的适配手段）Document*{margin:0;padding:0;}.box1{width:6.4vw;height:4.66vw;background-color
gaoya7305·2023-07-24 05:35

Vue-cli 3.0 px转rem移动端适配方案

在Vue-cli3.0搭建的项目中，对于移动端的适配使用到lib-flexible和postcss-pxtorem这两个插件使用方法npminstalllib-flexiblepostcss-pxtorem--save在main.js文件中引入import'lib-flexible/flexible.js'在package.json文件中添加"postcss":{"plugins":{"autop
天使爱打盹·2023-07-22 22:11

原生JS实现鼠标拖动dom改变滚动条位置

有时页面内容过多时会同时出现横向和纵向滚动条,鼠标拖动滚动条感觉操作有些繁琐,所以尝试直接拖动dom来实现拖动滚动条同样的效果dom结构如下.father{height:50vh;width:70vw;
Kirito_Beater·2023-07-22 20:45

【Vue】pc端的Vue项目，想要某个容器内的文字大小，随着窗口大小变化

height:calc(100vw*540/1680);//100vw:vm是屏幕的宽度，100%屏幕宽度//1680:设计稿的宽度//540:表示在1680的设计稿中，高度为540px当然不光容器的高度可以这样设置
meichaoWen·2023-07-22 16:29

H5页面滚动时显示滚动条，不滚动时隐藏滚动条

height:100%;}body::-webkit-scrollbar{width:0px;}body{-ms-overflow-style:none;height:100%;width:calc(100vw
和风微凉·2023-07-22 13:36

移动端适配

移动端适配的技术方案1.通过媒体查询的方式即css3的meidaqueries2.以天猫首页为代表的flex弹性布局3.以淘宝首页为代表的rem+viewport缩放4.rem方式MediaQueries
微胖界的胖子吖·2023-07-22 08:34

移动端适配

1.metaviewport@media(max-width:800px){body{background:red;}}不大于800px的屏幕上css的样式才会生效@media(min-width:321px)and(max-width:800px){body{background:red;}}不小于321px不大于800px的屏幕该css会生效。
实肆·2023-07-21 10:30

【ArcGIS】ArcGIS10.2完整安装操作手册-配置SDE的ST_Geometry

要将SQL和ST_Geometry或ST_Raster配合使用或访问GDB_ITEMS_VW和GDB_ITEMRELATIONSHIPS_VW视图中的ArcSDEXML列，Oracle必须能够访问这些库
实施工程师木易·2023-07-21 09:24

使用flex布局实现满屏品字布局

Documentdiv{background:red;border:1pxsolidwhite}#up{position:absolute;top:0%;width:100vw;height:50vh;
桜抄·2023-07-21 07:21

CSS---CSS面试题

10.em/px/rem/vh/vw区别1
maidu_xbd·2023-07-21 06:31

postcss-plugin-px2rem 移动端适配原理

1安装postcss-plugin-px2remnpmipostcss-plugin-px2rem --save-dev2webpack配置postcss-loaderconstpx2rem=require("postcss-plugin-px2rem");constpx2remOpts={rootValue:100,exclude:/(node_module)/,mediaQuery:false
跑跑快跑·2023-07-20 22:49

css 尺寸单位和移动端适配

尺寸单位px：绝对单位，不会动态改变，和设备像素有关；电脑端，一般和设备像素1:1的关系，1设备像素=1浏览器像素；移动端，分辨率可能达到2k，但是宽度却很窄所以此时n设备像素=1浏览器像素。px指的是浏览器像素，并不是设备像素em：相对单位，会动态改变，em是相对于其父元素的font-size，页面层级越深，em换算越复杂，麻烦。rem：相对单位，会动态改变，rem是相对html根元素的font
WZTTMoon·2023-07-20 19:31

媒体查询、百分比、rem和vw/vh等布局对比解析的各种方法

12.JPG(超详细)媒体查询、百分比、rem和vw/vh等布局对比解析响应式布局的常用解决方案对比(媒体查询、百分比、rem和vw/vh）本文介绍在布局中常用的单位，比如px、%、rem和vw等等，以及不同的单位在响应式布局中的优缺点
Phillmx·2023-07-20 15:50

vue3.0 + ts 项目实现pc端和移动端的适配+判断设备

vue3.0+ts项目实现pc端和移动端的适配写在前面：最近写前端项目需要做移动设配和PC端的适配，移动端适配包括了平板和各式各样的手机。
qiao若huan喜·2023-07-19 18:49

infotemplate样式css调整

/*信息窗口头部样式*//deep/.esriPopup.titlePane{position:relative;//头部左右边距border-radius:0;padding-left:px2vw(19
努力学习的小瑶·2023-07-19 13:42

浏览器视口

目录css单位相对单位绝对单位像素分类物理像素逻辑像素css像素DPRPPI浏览器视口布局视口视觉视口理想视口css单位在css中我们会使用到许多单位，如px，em，rem，vw，vh等等整体上，我们可以将它们分成两类相对单位相对单位即本身的值是需要依靠其他元素计算得出的如
法玛梅林·2023-07-19 02:19

前端学习——CSS3

Document*{margin:0;padding:0;}.box1{width:200px;height:200px;background-color:deepskyblue;}.box2{width:50vw
振华首席娱记·2023-07-18 10:56

vue3+vite+ts配置

文章目录1.src别名配置2.svg配置2.1封装svg全局组件3.集成scss与css完成主题定制3.1在vite中配置scss4.环境变量配置5.移动端适配6.自动按需加载7.mock配置1.src
ik i5·2023-07-17 06:24

面试题三、CSS响应式及原理

响应式媒体查询（@media）,rem,em,vw,vh这些算是响应式吗？我个人觉得这只能算是实现响应式的工具，那什么是响应式呢？
赵花花5070·2023-07-17 01:10

元素溢出隐藏滚动

flex+overflow//css.class-column{display:flex;overflow-x:scroll;}.class-columna{flex:none;width:50vw;height
visitor009·2023-07-16 18:55

element ui 相关 -------星星评分

#6BAE80','#6BAE80']更改对应评分文字内容html:js:texts:['糟糕','差','一般','好','超赞']更改星星图标大小.el-rate__icon{font-size:8vw
zyue_1217·2023-07-16 06:00

分享一个创意滚筒按钮

hsl(var(--hue),10%,90%);--fg:hsl(var(--hue),10%,10%);--trans-dur:0.4s;font-size:calc(40px+(60-40)*(100vw
timi先生·2023-07-16 02:06

移动端适配解决方案

移动端适配解决方案remrem基本知识如何根据不同设备的屏幕、分辨率，设置不同的HTML标签字号？设备不同，HTML标签字号设置多少合适？如何将设计稿中的px转化成rem单位？
山原旷其盈视·2023-07-16 01:21

pc端 如何使用vw实现自适应 vue sass 自定义函数

pc端网页px足够适应，都是一些form提交，增删改查的东西，不太需要做到移动端的自适应，但不排除会有pc端的首页会有一些花里胡哨的图片，这个时候如果屏幕分辨率差距很大，会造成样式不匹配，所以写一个利用vw
鸡汤辉·2023-07-15 10:21

移动端适配详解 , 给你解决适配烦恼

试想一下，如果我们只能开发web端，那么移动端的网友由谁来做！那也太悲惨了所以，这里说的就是如何开发页面到移动端，适配各个手机型号，让页面在手机上跑起来～目录理解些许概念1.开发的种类2.两个模糊的概念3.认识视口布局视口:视觉视口:理想视口:适配方案一：百分比设置(不推荐)适配方案二：rem+动态html的font-size问题一的解决方式:1-媒体查询2-JS动态计算3-使用lib-flexi
玄鱼殇·2023-07-15 05:46
上一页 8 9 10 11 12 13 14 15 下一页
按字母分类： ABCDEFGHIJKLMNOPQRSTUVWXYZ其他