-
React 移动端开发样式问题记录
2020-09-07 14:21:04React 移动端开发样式问题记录 1、 input 输入框无法聚焦输入文字 将样式中的 user-select: none; 更改为 user-select: text !important; 2、 背景设置 transparent 无效 经过 IOS 真机测试,transparent 在移动端...React 移动端开发样式问题记录
1、 input 输入框无法聚焦输入文字
将样式中的 user-select: none; 更改为 user-select: text !important;
2、 背景设置 transparent 无效
经过 IOS 真机测试,transparent 在移动端支持不好, 将 transparent 更改为 rgba(0, 0, 0, 0) 等效透明效果即可
3、 设置了 backdrop-filter: blur(20px) 后,模糊效果出现位置偏移情况
box-shadow 属性的位置偏移值影响了 backdrop-filter 的位置, 可以将 box-shadow 的偏移设置为 0, 或者直接取消 box-shadow,设置为 box-shadow: none; 即可
4、 设置了 background-attachment: fixed 后,背景图片位置不固定
background-attachment: fixed; 对移动端支持也不友好, 可以另外设置一个 <img /> 组件来充当背景图片, 将 <img /> 设置为 position: flixed; 即可达到相同效果。
5、 可以借助 animejs 等插件来辅助自己开发动画效果
-
移动端组件
2019-01-07 15:50:50基于vue的部分移动端组件,时间组件,搜索组件,弹框提示,滑动删除,登陆查询,下滑加载,等部分移动端vue封装的组件, -
移动端适配
2018-11-04 21:16:12移动端适配移动设备分辨率前言主流的移动端屏幕以及一些概念viewport视口手机的各种屏幕参数移动端适配rem适配方案vw单位适配 移动设备分辨率 前言 一直以来,我都觉得前端要做移动端的适配都是比较麻烦的事情,现在...移动设备分辨率
前言
一直以来,我都觉得前端要做移动端的适配都是比较麻烦的事情,现在花一点时间总结一下移动端适配的各种方案,这总结有可能不能很全面,希望以后陆续可以补充完整。
主流的移动端屏幕以及一些概念
viewport视口
我们做前端移动适配的时候,三个视口的概念是必须要有所了解的,这是最基本的概念。简单来说,移动设备上的viewport就是设备的屏幕上能用来显示我们的网页的那一块区域,但viewport又不局限于浏览器可视区域的大小,它可能比浏览器的可视区域要大,也可能比浏览器的可视区域要小。在默认情况下,一般来讲,移动设备上的viewport都是要大于浏览器可视区域的,这是因为考虑到移动设备的分辨率相对于桌面电脑来说都比较小,所以为了能在移动设备上正常显示那些传统的为桌面浏览器设计的网站,移动设备上的浏览器都会把自己默认的viewport设为980px或1024px(也可能是其它值,这个是由设备自己决定的),但带来的后果就是浏览器会出现横向滚动条,因为浏览器可视区域的宽度是比这个默认的viewport的宽度要小的。
名称 说明 visual viewport 显示在屏幕上的网页区域,可以简单的认为是手持设备物理屏幕的可视区域 layout viewport 就是你写样式的时候页面的布局区域,简单地理解为你布局完之后的一整个网页的大小 ideal viewport 最理想的视口,这个随设备不同而改变,最理想的视口就是移动设备的屏幕大小 光说可能不能理解清晰,引用几张图片吧
最后这个理想视口是根据不同的手机有所不同的,可以通过http://viewportsizes.com/查询到各种手机的理想视口。手机的各种屏幕参数
关于手机的各种屏幕参数,在前端页面布局的时候一般采用的都是i6的设计图也就是使用750px宽的设计图进行布局然后对其他手机的屏幕进行适配。
以下是iPhone手机的一些具体参数:设备 屏幕尺寸 分辨率(pt) Reader 物理分辨率(px) PPI(DPI) i4 3.5寸 320*480 @1x 320*480 163 i5 4寸 320*568 @2x 640*960 326 i6 4.7寸 375*667 @2x 750*1334 326 i6 plus 5.5寸 414*736 @3x 1242*2208 401 屏幕尺寸:这个就没什么好说的啦,实打实的手机屏幕大小
分辨率(pt):pt可以简单理解为一个物理长度单位,这个是绝对大小,是印刷行业常用的单位,等于1/72英寸。
Reader:是px与pt的的比值,也就是我们常说的几倍屏。
物理分辨率(px):物理点,屏幕上能够显示的最小单位。
PPI(DPI):每英寸下有几个px。移动端适配
目的:
移动端适配的目的就是使编辑的页面在不同尺寸的移动设备上,页面保持比较合理的尺寸比例,以及基本的样式,让用户在视觉上以及使用体验上不会有太大的偏差。rem适配方案
rem单位相信很多人都有接触过,rem按我的理解是一个相对单位,是相对于页面默认的font-size大小进行适应的。比如说,当页面默认font-size是16px时,1个rem就相当于16px的大小,我们可以通过动态改变font-size的方式来让页面适应不同的手机屏幕大小。改变font-size的方式大致有两种,一种是通过媒体查询media query,另一种是通过js获取屏幕宽度后根据不同屏幕宽度改变font-size。
js动态改变font-size关键代码:<!-- css --> <!-- 在meta里插入viewport,一般移动端适配都需要加这一行 --> <meta name="viewport" content="width=device-width initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
window.onload=function () { document.documentElement.style.fontSize=document.documentElement.clientWidth/3.75+'px' }//根据设计图来设置除数,比如说是i6就除以7.5那font-size就是50px,1rem=100rpx;
通过上面的设置,你就可以使用rem单位了,在i6规格的设计图下,100px=1rem的方式进行换算,进行页面的布局。通过js实现动态改变font-size来实现移动端适配的方法是一种简单实用的方法,实现效果也是蛮出色的。
另外一种通过media query的就暴力得多了,在css里面直接加入下面代码就可以实现简单的适配。
@media screen and (min-width: 320px) {html{font-size:50px;}} @media screen and (min-width: 360px) {html{font-size:56.25px;}} @media screen and (min-width: 375px) {html{font-size:58.59375px;}} @media screen and (min-width: 400px) {html{font-size:62.5px;}} @media screen and (min-width: 414px) {html{font-size:64.6875px;}} @media screen and (min-width: 440px) {html{font-size:68.75px;}} @media screen and (min-width: 480px) {html{font-size:75px;}} @media screen and (min-width: 520px) {html{font-size:81.25px;}} @media screen and (min-width: 560px) {html{font-size:87.5px;}} @media screen and (min-width: 600px) {html{font-size:93.75px;}} @media screen and (min-width: 640px) {html{font-size:100px;}} @media screen and (min-width: 680px) {html{font-size:106.25px;}} @media screen and (min-width: 720px) {html{font-size:112.5px;}} @media screen and (min-width: 760px) {html{font-size:118.75px;}} @media screen and (min-width: 800px) {html{font-size:125px;}} @media screen and (min-width: 960px) {html{font-size:150px;}}
vw单位适配
vw单位是CSS3才新加入使用的单位,是相对于屏幕进行换算的,是用于移动端适配的利器。100VW就是占满屏幕宽度以此来适配各种不同的屏幕大小。但是,这个vw单位在使用起来的时候还是挺麻烦的,因为要对设计图的尺寸进行换算,而且这种换算成vw会导致页面的实际效果与设计图会有1px到2px的偏差。在换算方面我们可以使用postcss下的一个插件postcss-pixel-to-viewport,这个插件可以让我们在编写CSS代码的时候直接按照设计图给的尺寸直接写px,然后用插件将px转成vw即刻。
配置://postcss.config.js const postcss_px_to_viewport = require("postcss-px-to-viewport") module.exports = { plugins: [ postcss_px_to_viewport({ viewportWidth: 375, unitPrecision: 5, viewportUnit: 'vw', selectorBlackList: [], minPixelValue: 1, mediaQuery: false }) ]
-
移动端布局
2021-01-05 20:10:39这里写自定义目录标题移动端是什么?移动端的现状移动端布局视口布局视口 layout viewport视觉视口 visual viewport理想视口 ideal viewport移动端难点总结 移动端是什么? 学习移动端布局,首先,我们需要知道什么...移动端是什么?
学习移动端布局,首先,我们需要知道什么是移动端,在前端开发里,一般来说,移动端就是手机和平板电脑。
移动端的现状
随着时代的发展,手机的品牌越来越多,每个品牌的型号也各不相同,也就导致了我们在开发时不能像pc端一样直接使用像素来布局,移动端的屏幕大小不同意味着我们使用常规布局在每个移动端打开都会不一样,所以常规流布局就不满足我们的需求了
移动端布局
现阶段的移动端布局方式:
流式布局(百分比布局)
flex 弹性布局
less+rem+媒体查询布局
混合布局
响应式布局:配合媒体查询在写的移动端布局的时候,盒子模型的使用也是要注意的,尽量使用css3盒模型来布局,因为常规流的盒模型的宽高并不会计算边框,而边框是默认是1px,无论在哪个移动端它也会是1px,会直接影响到布局。
视口
布局视口 layout viewport
一般移动设备的浏览器都默认设置了一个布局视口,用于解PC端页面在手机上显示的问题。
iOS, Android基本都将这个视口分辨率设置为 980px,所以PC上的网页大多都能在手机上呈现,只不过元素看上去很小,一般默认可以通过手动缩放网页。视觉视口 visual viewport
视觉视口说白了就是我们能看到网站的区域
我们可以通过缩放去操作视觉视口,但不会影响布局视口,布局视口仍保持原来的宽度。理想视口 ideal viewport
为了使网站在移动端有最理想的浏览和阅读宽度而设定
理想视口,对设备来讲,是最理想的视口尺寸
需要手动添写meta视口标签通知浏览器操作
meta视口标签的主要目的:布局视口的宽度应该与理想视口的宽度一致,简单理解就是设备有多宽,我们布局的视口就多宽<meta name="viewport" content="width=device-width, user-scalable=no,initial-scale=1.0,maximunm-scale=1.0,minimum-scale=1.0">
只要将html头部的meta标签内容改为上面这样,就可以了。
移动端难点
1.精灵图
因为移动端的尺寸比较小,我们正常的精灵图在直接插入时会看起来很模糊,这个时候就需要使用二倍图,正常来说我们使用的1px就是1个物理像素,但是在移动端的时候我们需要在1px中装入多个物理像素,这样才能保证图片不模糊,也能使图片缩放之后任然能够保证清晰度。
2.开发方案的选择
一般主流方案就是将pc端和移动端的样式分开,也就是说,PC端和移动端为两套网站,pc端是pc端的样式,移动端在写一套,专门针对移动端适配的一套网站
但是我们也可以利用媒体查询来进行响应式布局,也就是说pc端和移动端共用一套网站,只不过在不同屏幕下,样式会自动适配。总结
移动端的布局其实并不难,只要注意在布局时一定是使用百分比或者相对单位来做布局,让里面的元素能够随着页面大小的缩放整体缩放,不能出现一缩放界面就混乱的情况。
-
移动端反思
2020-07-17 15:43:14移动端 viewport视口设置 浏览器兼容性 -webkit-内核主流 移动端布局方式 流式布局(自适应百分比布局) bootstrap响应式布局 媒体查询+rem布局 flex弹性布局 移动端和PC端区别 关注的问题: 手机兼容性vs浏览器... -
移动端ui设计,移动端界面
2020-07-20 17:01:36移动端ui设计,移动端界面。相信你可能对这个概念比较模糊,一般来说,ui设计分为移动端ui设计和PC端ui设计以及游戏ui设计和其他端ui设计,但是近年最火的就是移动端ui设计。那么移动端的ui设计为什么这么火呢?今天... -
移动端特效
2020-07-19 11:13:31移动端网络特效 移动端触屏事件 1.1触屏事件概述 触摸事件对象 移动端常见特效 添加过渡效果 3.插件的使用 Lib-fastclick.js ... -
移动端表单验证
2018-10-28 10:33:24在MUI构建的移动端表单中,pc端的网页表单验证器不支持移动端验证 -
写移动端自适应屏幕的方法
2019-04-14 19:37:50前端移动端开发的时候肯定是会面对不同型号的手机的页面展示问题的,今天给大家推出另外一种自适应不同移动端的方法,使用vw,vh单位。 vw和vh单位的大小是多少? vw和vh是根据设备的宽度和高度来决定的,设备的宽... -
iVideo倔强的移动端视频播放插件目前仅支持移动端点播
2019-08-10 03:57:28iVideo 倔强的移动端视频播放插件, 目前仅支持移动端点播 -
vue移动端脚手架
2019-05-07 11:35:05基于vue-cli 3.0的架构,自己额外拓展了一些移动端相关的配置,和一些其他的封装,适用于开发移动端web项目的架子。 -
移动端开发视频
2019-07-22 22:07:46资源名称:移动端开发视频资源目录:移动端实战系列视频教程移动前端开发视频下载学习视频软件必看 资源太大,传百度网盘了,链接在附件中,有需要的同学自取。 -
移动端轮播插件
2017-06-08 15:49:21移动端轮播插件 -
移动端下拉分类.
2018-03-30 21:47:40移动端下拉分类移动端下拉分类移动端下拉分类移动端下拉分类移动端下拉分类移动端下拉分类移动端下拉分类移动端下拉分类移动端下拉分类 -
TensorFlow Lite移动端开发
2019-11-04 13:33:15深度学习模型对于算力要求较高,为了能在算力羸弱的移动端进行部署,必须对原模型进行量化压缩,从而提升模型的计算性能,而TensorFlow Lite是一种用于设备端推断的开源深度学习框架,其能将TensorFlow模型转换为... -
移动端视频播放插件
2018-03-15 13:33:58移动端视频播放插件移动端视频播放插件移动端视频播放插件移动端视频播放插件移动端视频播放插件 -
移动端图片上传压缩
2018-01-16 16:29:59移动端图片上传压缩移动端图片上传压缩移动端图片上传压缩移动端图片上传压缩移动端图片上传压缩 -
移动端日期插件
2019-06-13 16:42:03移动端日期选择插件,mobiscroll.custom-2.6.2.min.js和mobiscroll.custom-2.6.2.min.css,亲测可用 -
Vue项目打包成移动端APP
2019-09-25 20:50:14Vue项目打包成移动端APP 需要准备的工具:Hbuilder 目录 Vue项目打包成移动端APP 首先打包vue到dist目录 然后再Hbuilder中打开dist目录 然后将dist包含的 web项目 转换为 移动 APP项目 前几步配置完成后,就... -
移动端购物车效果
2019-03-17 13:55:59一个网上书城购买的移动端页面,实现了获取本地数据,到详情页,再到购物车页面的逻辑,自学者可以参照试试 -
移动端视口
2019-09-16 12:11:18在移动端, 视口大小并不等于窗口大小, 移动端视口宽度被人为定义为了980 2.为什么是980而不是其他的值? 因为过去网页的版心都是980 乔布斯为了能够让网页在移动端完美的展示, 所以将iOS手机视口的大小定义为了980 ... -
html移动端商城
2018-09-27 16:42:37一个weiui开发的移动端商城,需要的可以下载看看,=VV= -
Calendar移动端日历插件
2019-08-10 02:52:12Calendar 移动端日历插件 -
移动端性别切换网页特效
2019-11-11 21:43:30移动端性别切换网页特效 移动端性别切换网页特效 移动端性别切换网页特效 移动端性别切换网页特效 移动端性别切换网页特效 -
移动端商城H5模板
2019-03-30 09:13:21移动端商城H5模板 -
移动端测试,最新版全套
2020-01-08 16:21:48本章主要说明了移动端测试环境的搭建,能够在工作中独立完成测试环境的搭建,模拟器的使用,能把项目部署流程熟练操作。通过对移动端测试基础知识的讲解,能够清楚认识对于移动端项目的深入理解。 熟练掌握移动端... -
移动端初始化css
2019-01-23 11:13:50常用移动端公共css -
Axure移动端组件库
2019-01-16 16:37:56Axure移动端组件库 一套实用的Axure移动端设计组件库 不要30分只要3分 -
移动端滚动监听
2018-01-02 16:17:52移动端类似WEB页面的滚动监听事件。 手指滑到相应ID导航指向那个ID。 应用到 jquery 和 原生JS 。
-
ROS主从机配置
-
ProBuilder快速原型开发技术
-
PAT 甲级 1019 General Palindromic Number (20分)
-
微信小程序之颜值测试项目(测颜值)【项目实战】
-
<exclude>**/rebel.xml</exclude> </excludes> </resource>
-
Java中的8大基本数据类型详解
-
数据库的事务隔离级别 知识总结
-
数据科学:基于Python和R语言实现
-
手势解锁-canvas-javascript实战
-
交错并联在低压大电流开关电源中的应用
-
FFmpeg音视频基础之C++系列第1:C++入门经典第10版
-
基于Django的电子商务网站设计--第九章 Python在线题库
-
分布式网络数据包优先级传输模型研究仿真
-
卸载office.zip
-
基于嵌入式技术的毛巾剑杆织机控制系统设计
-
java poi导出带有下拉框的模板
-
基于Django的电子商务网站设计--第二章
-
DRF实战开发技巧(序列化器的一些操作)
-
仿真钢琴-javascript实战
-
Vue——监听属性