背景1.1 行业现状与问题很多技术同学都知道，移动端往往比较侧重业务开发，这会导致人员规模不断扩大，项目复杂度也会持续增长。而为了满足业务的快速上线，很难去落实统一的设计规范，在开发过程中由于UI缺乏标准导致的问题不断凸显，具体体现在以下4个层面：设计层面：由于UI缺乏标准化设计规范，在不同App及不同开发语言平台上设计风格不统一，用户体验不一致；设计资源与代码均缺乏统一
转载
2024-04-03 12:26:09
62阅读
原型如下：要求如下：适应各种机型源码如下： --> .container { border: 1px solid #F0F1F1; -webkit-box-shadow: 0px 3px 3p
原创
2021-07-29 10:33:22
154阅读
原
转载
2017-11-27 14:55:00
93阅读
2评论
原型如下：要求如下：适应各种机型源码如下： --> 高校地图 ...
转载
2017-11-27 14:58:00
143阅读
2评论
原型如下：要求如下：适应各种机型源码如下：<!DOCTYPE html > <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /&g
原创
2022-04-22 11:40:08
546阅读
react+flexible适配布局 （1）npm i lib-flexible --save （2）npm i postcss-px2rem --save （3）在 node_modules/react-scripts/config/webpack.config.js 下做如下配置 const p ...
转载
2021-10-27 15:00:00
1694阅读
2评论
前言 学习总结使用，博客如中有错误的地方，请指正。改系列文章主要记录了搭建一个管后台的步骤，主要实现的功能有：使用路由模拟登录、退出、以及切换不同的页面；使用redux实现面包屑；引入使用其他常用的组件，比如highchart、富文本等，后续会继续完善。一、配置侧边栏组件 我们已经将将路由搭建好了，在浏览器中输入不同的url路径，能访问到不同的页面。接下来，我们要将管理后台的页面布局呈现出来。
转载
2024-03-25 16:49:17
356阅读
rem布局非常简单，首页你只需在页面引入这段原生js代码就可以了 (function (doc, win) { var docEl = doc.documentElement, resizeEvt = 'orientationchange' in windo...
原创
2022-04-06 13:47:23
609阅读
一：大家先下载metahandler.js二：准备一个用px实现的移动页面（宽度固定死的页面），引入metahandler.js框架1、视口设置width=640，是根据psd图来设置，有多宽设置多宽（设计图是640的设置640）<meta content="target-densitydpi=device-dpi,width=640" name="viewport">2.
转载
2024-04-12 22:49:51
155阅读
移动端开发页面布局-响应式布局1、 响应式布局定义2、 原理3、Bootstrap前端开发框架3.1 使用步骤3.2 栅格系统3.2.1列嵌套3.2.2 列偏移3.2.3 列排序3.2.4 响应式工具 1、 响应式布局定义页面布局会随着屏幕大小变化而发生不同的响应，称为响应式布局。 （1）不需要单独写移动端页面 （2）根据不同设备发生变化2、 原理通过媒体查询针对不同宽度的设备进行布局和样式的设
转载
2024-08-13 11:26:05
292阅读
处理方法： （1）html书写 form标签中去掉action参数，定义onSubmit方法，如下所示： （2）事件处理 关键的是阻止掉页面默认提交： .
转载
2018-07-11 21:20:00
664阅读
2评论
FlexBox提供了在不同尺寸设备上都能保持一致的布局方式。FlexBox是CSS3弹性框布局规范，目前还处于最终征求意见稿 (Last Cal...
原创
2022-07-13 23:06:39
223阅读
咱还是直奔主题，如何快速制作输入界面呢？如下图： 第一步，放置一个UnimFieldContainer，设置属性： AlignmentControl=uniAlignmentClient，让客户端处理对齐； LayoutConfig.Padding=10,10,10,10，让容器的四周内边距留10个
原创
2021-07-29 15:58:01
1372阅读
React作为目前最流行的前端框架之一，其受欢迎程度不容小觑，从这门框架上我们可以学到许多其他前端框架所缺失的东西，也是其创新性所在的地方，比如虚拟DOM、JSX等。那么接下来我们就来学习一下这门框架是如何构建起一个单页应用的。前言首先在学习这门框架前，你需要对以下知识有所了解：原生JS基础CSS基础npm包管理基础webpack构建项目基础ES6规范以上五个知识点也是目前学习其他前端框架所必须了
一、使用react-app-rewired包修改react配置1、安装基础的包npm install react-app-rewired customize-cra -D2、在项目的根目录下创建一个config-overrides.js文件const { override } = require('customize-cra');module.exports = {};3、安装样式转换的包npm install less -D4、安装postcss-pxtorem包n
原创
2021-06-15 15:55:21
1442阅读
手机端自适应布局demo原型如下：
图片发自简书App
要求如下：适应各种机型源码如下：
<!DOCTYPE html >
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
原创
2021-07-28 14:09:12
250阅读
手机端自适应布局demo原型如下：图片发自简书App要求如下：适应各种机型源码如下：<!DOCTYPE html ><html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />...
原创
2021-07-28 14:22:48
208阅读
手机端自适应布局demo 原型如下：
图片发自简书App要求如下：适应各种机型源码如下：<!DOCTYPE html ><html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta na
原创
2022-04-22 11:39:30
139阅读
响应式是按照pc,pad，mobile 不同尺寸显示不同的布局内容，通过媒体查询。自适应是手机端根据屏幕宽度做等比例的缩放。参考https://www.jianshu.com/p/b00cd3506782具体实现原理请参照：从网易与淘宝的font-size思考前端设计稿与工作流，写的很不错！希望对需要的朋友有所帮助！<!DOCTYPE html>
<html lang="en"&
转载
2023-07-29 20:36:04
207阅读
手机端自适应布局demo原型如下：图片发自简书App要求如下：适应各种机型源码如下： --> 高校地图 ...
转载
2018-03-14 11:32:00
63阅读
2评论
