移动端适配

vw的移动端适配方案

前言：1.先来跟大家科普一个单位：vw（视宽），即当前窗口的可视宽度2.然后再来科普另一个单位rem，这个单位是相对于html的font-size，假如说html的font-size是16px，那么1rem=16px大家继续看：举个例子：我们平时手机所说的分辨率是640*1136、750*1334其实说的是手机的设备分辨率，但是上面所说的视宽是逻辑像素，怎么计算呢，其实很简单，设备分辨率/2就是设
尼古拉斯二嘎·2020-07-06 22:06

手淘H5移动端适配方案flexible源码分析

移动端适配一直是一个值得探讨的问题，在业余时间我找了一些页面，查看了一些厂商对于移动端H5页面的适配方案，看到了几个典型的例子，今天就来记录一下我看到的第一个典型的例子，也是我们公司目前普通H5项目正在使用的适配方案
HYD2000_1977·2020-07-06 22:33

移动端适配问题 px、rem、Vw / Vh

rem做法一、前公司大神的适配方式var_App={env:,ts:,version:};!function(n,e){vart=n.documentElement,o="orientationchange"inwindow?"orientationchange":"resize",i=function(){varn=t.clientWidth;n&&(t.style.fontSize=n>540
weixin_34268843·2020-07-06 19:58

H5移动端适配总结

图片来源网络foreword这篇总结了我个人所知道的一些关于移动端适配的知识。希望对读者有所帮助。
会拐弯的蜗牛·2020-07-06 18:23

移动端web开发的设计稿与工作流

致谢一直以来移动端适配便是困扰自己的一个难题，今天休息，查阅了很多资料将其整理出来。
5d18ee6b5b1c·2020-07-06 17:37

移动端适配：动态设置html元素的font-size（页面使用rem做单位）

一、前言：首先我们要了解的知识点：1.物理像素(physicalpixel)我们看到的每个屏幕都是由一颗颗我们肉眼难以看到的小颗粒（物理像素）组成的。2.逻辑像素是计算机坐标系统中的一个点，这个点代表一个可以由程序使用的虚拟像素(比如说CSS像素)。3.设备的像素比(devicepixelratio)简称DPR它的数值体现了物理像素和逻辑像素之间的关系，用公式可以计算出该设备的DPR的大小：DPR
winne雪·2020-07-06 17:00

video — 移动端适配

最近做微信内H5分享页，适配移动端时，欲哭无泪，各种坑。来，现在开始填坑。移动设备：iPhone6s(ios11.1)，GIONEES10(Android7.0)。自动播放PC端视频自动播放，在video标签里加上“autoplay”属性即可；但该属性在移动端不兼容（移动端为了避免浪费用户的网络流量，默认不允许媒体文件自动播放）。☆对于Android手机来说，即使video.play()也是不能自
向日葵·2020-07-06 16:51

web前端月刊-13期(201905)

关于移动端适配，
枫星辰·2020-07-06 13:56

移动端适配问题

做过移动端的小伙伴们都知道，移动端的适配是一个比较难解决的事。首先我们先来了解下移动端的物理像素、逻辑像素、像素比的概念。1.物理像素：通常是指浏览器的分辨率，也可理解为屏幕的宽度*高度。开发PC端的话，css中的1px就等于一个物理像素；2.逻辑像素：这个概念主要针对移动端，移动端开发的话，1px就是一个逻辑像素；3.像素比（dpr）：物理像素/逻辑像素。在移动端可以通过window.devic
前端设计·2020-07-06 04:39

H5移动端适配（flexible.js）

流程：1、设定ui设计稿的尺寸大小为基准2、算出当前屏幕大小3、跟ui设计稿算出比例值4、然后直接用设计稿上标的值*（3、跟ui设计稿算出比例值）remFontSize.js(functionflexible(window,document){//这里直接以iphone6的尺寸为设计稿varBASE_WIDTH=750;varBASE_HEIGHT=1334;vardocEl=document.d
vv_小虫·2020-07-05 19:28

基于element的网站自适应方案（移动端适配）

一般而言，管理系统类的网站我们往往会按照PC的标准来设计，不会去考虑小屏幕的适配，甚至是移动端的适配，因为这种系统网站往往涉及到大量的列表查询页（表格列往往很多，列内容长短不一），详情页（信息展示量大且分栏排布，例如一屏展示4列内容，或5列内容），数据分析的图表页（含有大量图表，例如折线图，柱状图，饼图）等等。为了获得最佳的视图效果，使用者都会选择在电脑上浏览页面。如果产品经理要求在移动端查看也能
河鲜森·2020-07-05 05:32

less+rem移动端适配+PC

//声明@test_width:300px;//混合.box{width:@test_width;height:@test_width;background:yellowgreen;.border}//混合可以带参数嵌套&less//变量//适配主流设备@adapterDeviceList:320px,360px,375px,384px,400px,414px,424px,480px,540px,
qq_15732905·2020-07-05 02:19

一篇搞定移动端适配

juejin.im/post/5e6caf55e51d4526ff026a71前言手机市场日渐丰富的同时，给我们前端开发人员带来的“网页内容自适应屏幕尺寸进行显示的问题”也日渐凸显出来，接下来我们就要细说移动端适配的前世今生及方案
奇舞周刊·2020-07-05 02:36

使用Typescript和React重构CNode社区

等以后水平提高了会考虑重构本项目，并且增加移动端适配。
Tuzilow·2020-07-05 01:00

移动端rem适配的js

移动端适配都用的时rem来做，在你的项目中只需要引用下面的js，即可适配成功。
leesession·2020-07-04 20:29

记录一次神奇的查bug经历

事情是这样，项目是C++开发的，沿用的另一个平台的内容作了移动端适配就是用到了IOS上，所以可以理解为我对这些代码很不熟，毕竟几百万行的代码都每个逻辑都清楚的大概整个公司也没几个。
踏雪2017·2020-07-04 18:57

一文搞定移动端适配！

手机市场日渐丰富的同时，给我们前端开发人员带来的“网页内容自适应屏幕尺寸进行显示的问题”也日渐凸显出来，接下来我们就要细说移动端适配的前世今生及方案。为什么要移动端适配？
Tammyhlf·2020-07-04 03:37

【移动端】移动端适配方案

#安装px2rem-loader(只适用于css样式）npminstallpx2rem-loader--save-dev#移动端适配解决npm包"lib-flexible"npminstalllib-flexible
AlengHan·2020-07-02 18:00

移动端适配（简单的js代码搞定）

第一步：创建一个js文件(function(doc,win){vardocEl=doc.documentElement,resizeEvt='orientationchange'inwindow?'orientationchange':'resize',recalc=function(){varclientWidth=docEl.clientWidth;if(!clientWidth)return
Mr航·2020-07-02 17:10

vue结合el-upload实现腾讯云视频上传功能

要考虑视频大小，pc移动端适配，转码，还有防盗版等问题。最终决定使用腾讯云上传视频
·2020-07-01 14:45

移动端适配

下边有两种方法，原理是一样的，就是写法上，有稍微的不同。第一种：(function(doc,win){vardocEl=doc.documentElement,isIOS=navigator.userAgent.match(/\(i[^;]+;(U;)?CPU.+MacOSX/),dpr=isIOS?Math.min(win.devicePixelRatio,3):1,dpr=window.top
Smile0L0·2020-07-01 13:51

移动端适配

我查阅了大量资料和进行了一些实践，下面是我对移动端适配的一些认识。首先我们来谈谈我们在电脑端用的字体单位px和em在国内的网站中大多都是使用px作为字体
weixin_30865427·2020-07-01 05:01

Flexble移动端适配方案：rem和vw

rem移动端适配方案:第一步:在头部引入第二步：文字基准调整：font-size:75pxvscode里面有个插件px2rem，然后就可以正常使用了，写ｐｘ时插件会自动转换为rem问题：rem并不适合用到段落文本上
李六木·2020-07-01 04:45

前端移动端适配的常用方法总结

方法一、通过js来实现(function(doc,win){vardocEl=doc.documentElement,resizeEvt='orientationchange'inwindow?'orientationchange':'resize',recalc=function(){varclientWidth=docEl.clientWidth;if(!clientWidth)return;
第三眼的意中人·2020-06-30 11:49

js移动端适配封装rem

小米官网写法：1rem=100px!function(n){vare=n.document,t=e.documentElement,i=720,d=i/100,o="orientationchange"inn?"orientationchange":"resize",a=function(){varn=t.clientWidth||320;n>720&&(n=720);t.style.fontSi
不脱单，不改名·2020-06-30 05:04

web前端页面适配方法

viewport---->网页适配要求：1.网页宽度必须和浏览器保持一致2.默认显示的缩放比例和PC端保持（缩放比例1.0）3.不允许用户自行缩放网页满足这些要求达到了适配，国际上通用的适配方案，标准的移动端适配方案
xingjidemimi·2020-06-30 02:45

移动端适配——pt,px

pt：逻辑像素或逻辑分辨率相当于我们用浏览器模拟调试移动端时看到的各手机的像素，如下图iPhone6看到的宽高375*667，这个就是逻辑像素，也可以看做是一个长度单位:px：物理像素或物理分辨率，又被称为设备像素下图的750*1334就是物理像素，它不能看做是一个长度单位，可以看做是一个点，即像素点结论：pt和px的关系就是——1pt里面有几个像素点，下图的Reader就是反应它们之间的比例，即
where_slr·2020-06-29 18:07

vue项目在webpack2实现移动端字体自适配

使用vue开发移动端页面时，往往需要实现页面根据不同设备屏幕进行尺寸的适配，实现将px自动换算成rem单位，其实只需要安装下面的两个插件即可快速实现移动端适配问题。
小鸟__老鹰·2020-06-29 14:16

vue项目中使用lib-flexible解决移动端适配的问题

vue项目中使用lib-flexible解决移动端适配的问题第一部分：项目中引入lib-flexible一、项目中安装lib-flexible$npminstalllib-flexible二、查看是否安装完成
皮皮灬虾·2020-06-29 02:05

前端解决移动端适配的五种方法

移动端适配的五种方法所谓移动端适配，就是WebApp在不同尺寸的屏幕上等比显示第一种方法：viewport适配原理：通过设置initial-scale,将所有设备布局视口的宽度调整为设计图的宽度.
Cling丶xia·2020-06-28 20:22

2019 携程前端面试遇到的题目分享

vue生命周期vue父子组通信箭头函数什么情况下不能用原型原型链介绍一下闭包是什么自己有没有写过node中间件webpack有没有用过，都用哪些功能移动端适配怎么做rem和em的区别css怎么画一个三角形
weixin_34380948·2020-06-28 18:20

移动端适配

What:移动端需要得到与PC端一样优秀的体验Why:移动端屏幕宽度与分辨率变化将对原有PC端页面中的对象的展示造成影响。How:响应式OR自适应1.移动端静态展示特点分辨率较低意味着可承载像素总量降低屏幕尺寸降低导致浏览器窗口变小影响页面布局手机屏幕规格太多由此带来的问题是：问题1：迷你的屏幕如何能看电脑屏幕中显示良好的网页问题2：布局的问题如何解决，还要兼顾成本。2.常见解决思路2.1布局问题
_贺瑞丰·2020-06-28 10:42

Nuxt.js踩坑分享

本项目主要为移动端项目，引入flexible.js实现移动端适配问题。
weixin_33946020·2020-06-28 08:53

前端移动端适配总结

meta标签到底做了什么事情做过移动端适配的小伙伴一定有遇到过这行代码：但是，很多小伙伴只是感性的认识：噢，我加了这行代码，然后页面的宽度就会跟我的设备宽度一致。然而，这种理解是很片面的。
weixin_33890526·2020-06-28 07:03

98道经典Vue面试题总结（长期更新）

或添加群主微信hanxuming888进群)本文档基于vue-cli技术栈总结了vue-cli工程vue.js核心知识vue-router路由vuex状态管理器axios等http请求移动端适配T
weixin_33863087·2020-06-28 07:37

解决vue移动端适配问题

1，先看看网上关于移动端适配讲解再聊移动端页面适配，rem和vw适配方案！基础点：rem相对根节点字体的大小。
weixin_33858249·2020-06-28 06:30

移动端适配字体大小

全局引入一下的js代码：/*适配字体大小*docEl.style.fontSize=a*(clientWidth/b)+'px';*b为设计稿的宽*a为在标准屏宽下rem的px值*x为在设计稿上量得的px*计算：x/b*b/a=>x/a*使用：使用前，先按照设计稿宽值自定义b值，并尽量把a值定义为1,10,100等，以便计算**/(function(doc,win){vardocEl=doc.do
??yy·2020-06-28 04:10

Webpack4:完整的项目搭建

eslint(代码检测)，按需加载（bundleimport）,react-router4.x,react-css-modules(css模块化),postcss(css前缀自动添加)，px2rem(移动端适配
weixin_33729196·2020-06-28 04:27

移动端适配方案（rem+flex）

为什么用rem不用px?主流：各大网站的移动版绝大多数都是用的rem。移动端屏幕分辨率差别太大：最低适配的iPhone6，分辨率仅为750*1334。而现在市面上大多数手机，都达到了1080*1920或1080*2340（全面屏）。所有元素都要用rem吗？大部分时候都是如此，但也有一些例外，比如文字的font-size，可能直接设为如17px，直接写死。一些近乎占满整个宽度的banner，可能它的
weixin_30696427·2020-06-27 23:05

我遇到移动端ios系统遇到的一些坑和解决办法

俗话说：移动端适配是最头疼的事情，也是头发掉得最快的时候。我在移动端开发中遇到很多坑。主要是发生在适配ios系统中，无论从页面布局还是插件的使用，ios感觉有些独特。
weixin_30600503·2020-06-27 22:57

经典Vue面试题总结 2019-06-14

本文档基于vue-cli技术栈总结了vue-cli工程vue.js核心知识vue-router路由vuex状态管理器axios等http请求移动端适配Tab切换等常用功能vue与原生app混合交互vue
南台观芸秀·2020-06-27 21:44

移动端页面适配方案及原理

本人未雨绸缪，学习一波移动端适配方案。
小章鱼哥·2020-06-27 10:49

移动端适配以及百分比布局与rem比较

pc端网站与移动端(手机)网站区别PC端:屏幕尺寸大,显示内容多,结构复杂,缩小浏览器窗口,页面内容结构并不会发生改变,也并不是响应式移动端(手机网站):屏幕尺寸小,显示的内容有限,结构清晰,简洁,设备类型(ipad,iphone5,6,安卓等)繁多,页面内容结构自适应变化,随着浏览器窗口缩小而缩小,放大而放大,等比例缩放相同点:利用html+css(包括css3)+javascript,pc端性
如风似我·2020-06-27 08:43

蚂蚁金服前端实习生二面面经

写在前面下面分享一下BAT及美团、头条、滴滴、小米、网易等各大公司的各类面试题最新面试题https://v2ee.cn/有需要的小伙伴拿走~蚂蚁金服前端实习生二面面经时间：2020暑期洗牌算法vue双向绑定flex移动端适配
红茶一点·2020-06-26 20:43

前端移动端适配方法

前端移动端适配方法移动端的适配，是我接触移动端时遇到的第一个大难题，现在回顾主要的解决方法有一下几种：1.第一种是通过javascript修改标签的内容，通过控制不同移动端的缩放比例，来达成适配2.第二种是通过
Zonebystar·2020-06-26 14:57

微信小程序主页面排版

--->view结构---->html*.wxss--->view样式----->css*.json---->view数据----->json文件储备知识理解事件机制理解组件化理解数据绑定Flex布局移动端适配方案贴心小建议学习
阿圆啊哈·2020-06-26 01:17

媒体查询+rem+flexible.js实现移动端适配

技术栈简介：媒体查询：通过查询当前属于哪种设备,让网页能够在不同的设备下正常的预览。（再通俗点来说，就是通过媒体查询，能够自动判断该浏览器所在屏幕的大小）rem：CSS3新增的相对长度单位，是指相对于根元素html的font-size计算值的大小。简单可理解为屏幕宽度的百分比。flexible.js：用来适配移动端的javascript框架。根据宽度的不同设置不同的字体大小，样式间距都使用rem作
打代码一点也不好·2020-06-25 22:36

H5开发问题总结

一.移动端适配问题移动端适配问题是开发H5首先要解决的问题，以前的时候据说是采用了媒体查询的方式，后来采用了rem的方式。
懒散的小爬虫·2020-06-25 22:08

移动端适配原理详解

下面讲的都是移动端适配的原理性内容，觉得没意思的，想要移动端适配方案的，点击下面链接去复制js代码移动端rem适配，h5适配，1px像素问题1.设备独立像素与屏幕密度有关,简称dip。
shenroom·2020-06-25 21:12

用hooks封装一个跟antd-pro效果一样的侧边导航栏

说明：antd-pro的侧边导航栏带有自动缩放、移动端适配的功能，去看了antd-pro的文档，发现是用了一个layoutpro组件，算了自己写一个。
胜天一子半·2020-06-25 13:22
上一页 12 13 14 15 16 17 18 19 下一页
按字母分类： ABCDEFGHIJKLMNOPQRSTUVWXYZ其他