elementui-ui适合移动端用么

来源：蜘蛛抓取(WebSpider) 时间：2017-04-04 10:33 标签： element ui适合的平台
移动端页面使用rem来做适配 - 简书
移动端页面使用rem来做适配
rem（font size of the root element）是指相对于根元素（即html元素）的字体大小的单位。假设根元素的字体大小是10px, 则5rem的大小为 5*10=50px,例如
font-size: 10
width: 2 /* 2*10 = 20*/
rem来做适配
以前我们往往这样做页面：viewport width 设置为 device-width，然后选我们需要兼容设备的最小宽度（一般是320px）。根据这最小宽度来做页面。单位使用px和百分比。在宽度不同的设备上，页面的字体大小，内容尺寸都是一样的，不同的是，大屏的内容间的空隙比小屏的大。所以这样做的缺点就是，页面在某些尺寸的设备上显示的效果不好。
如果用rem来页面，我们会根据不同的设备宽度在根元素上设置不同的字体大小。宽度越宽，字体越大。然后对原本使用px的地方使用rem来替换。这样，字体大小，内容尺寸，对随着屏幕宽度的变大而变大。
1 根据不同的设备宽度在根元素上设置不同的字体大小。为了能将设计稿中的 px 方便的转换为页面中 rem，我设置 1rem 为 宽度为 640px 的设计稿中的 100px。代码如下
(function(win) {
var doc = win.
var docEl = doc.documentE
function refreshRem() {
var width = docEl.getBoundingClientRect().
if (width & 540) { // 最大宽度
width = 540;
var rem = width / 6.4;
docEl.style.fontSize = rem + 'px';
win.addEventListener('resize', function() {
clearTimeout(tid);
tid = setTimeout(refreshRem, 300);
}, false);
win.addEventListener('pageshow', function(e) {
if (e.persisted) {
clearTimeout(tid);
tid = setTimeout(refreshRem, 300);
}, false);
refreshRem();
})(window);
还有一种方法会根据 devicePixelRatio 设定 initial-scale 来放大 viewport，使页面按照物理像素渲染，提升清晰度。 代码见
做页面时将设计稿的宽度缩放至 640px。在上一步中，1rem 为此时设计稿中 100px 的值。屏幕的宽度也就是 (640 / 100) =
前端攻城狮。爱编程，爱美食。投身到IT行业，成为码农也有些时日了。大多数时间都在做前端开发，整天总是和UI打交道。有些时候，总是有些不尽如人意的情况，今天总结一下，整体吐槽一下。
1、遇到web设计出身，转行做移动客户端UI。保持着web设计风格，页面中组建过多、过于密集、文字及按钮偏小。在电脑看效果图还不错，放到手机时自然就出问题了。组建过多拥挤较小的手机屏幕时，很容易失去重点，没突出；同时布局太紧凑，同时按钮较小很容易造成误操作。 文字偏小，在手机上就很明显了，会感觉很不习惯。
2、可能也是web的习惯，制作按钮的时候，只有一张贴图，基本没有多状态的设计。最后要么不实现多状态，要么好心提醒UI同事。当然结果嘛就不一定了。
3、【非常】与众不同的设计，效果出来了，发现与目前已知的程序逻辑相背驰。当然效果还是有点特点的，类似的设计都没有这样的。最后只为了那一点不同，做了非常多的配合兼容，
几乎为了一个UI修改了近三分之一页面，不知道这算不算得不偿失（至少我悄悄这么认为）。当然，也不要说有大神的实力，把现有的程序逻辑完全重新实现一遍，以后就没
问题了。先不说工作量和值不值得问题，数量众多的我想还是凡人级的码农。
4、总是只出最漂亮的情况的效果图。个人感受，当拿到一个页面效果图时，一看真的不错，不过却只有那一种情况，设计图中虚拟的内容变化时，一下就变得不美观了，更差的，直接就布局不正常了。后果嘛，就各种各样了。
5、针对平台的设计，和针对不同情况的贴图完全没有。现在很多应用都是多平台的，目前主要是IOS 、Android ，IOS有几种屏幕、Android当然就更多的多了。这么多屏幕当然不能每种都设计一种，但至少要有个针对不同的平台，各自有基准效果图。但是遇到了，只做一种的时候，另一边的程序员，就只能没有非常准确的参照，看着来了。
6、切图的分类和优化。例如，在用非常大的图片时，如果图片不包含透明部分，可以尝试用jpg格式，可以使程序包小很多，当然这种情况比较适合Android。再比如能用9patch的图，就不要切完整的，也可以
省些包的大小，同时还能更好的兼容。这种情况通常就需要程序去沟通了。
数数也有6条了，看来几年码农经历，吐槽还是不少的。当然，这里没有针对UI 设计如何如何，首先纯属吐槽；其次，也感叹一下沟通的重要，不能一心只是码代码。沟通好了，上面那些问题有的可能就不会出现；即使出现了，好的沟通也是迅速解决问题的先决条件。
参考知识库
* 以上用户言论只代表其个人观点，不代表CSDN网站的观点或立场
访问：8802次
排名：千里之外
原创：13篇
(1)(1)(4)(1)(2)(2)(1)(1)(2)(1)(1)(1)(2)在标签的属性前加：
&el-row :gutter="10"&&el-row&
如果属性类型为Number:
&el-col :xs="8" :sm="6" :md="4" :lg="3"&&el-con&
如果属性类型为Object:&&
&el-col :xs="{span:24,offset:0}"&&el-col&
如果属性类型为string:&&
&el-row type="flex"&&el-row&
如果属性类型为boolean:
&el-button :plain="true" :disabled="true"&主要按钮&/el-button&
如果报错：
&el-button plain disabled&主要按钮&/el-button&
至于为何有些属性需要带：有些不需要，
：大概是vue里面的v.bind,将这些组件的属性绑定上去，html原来标签属性不需要加：
阅读(...) 评论()

我要回帖

更多关于 element ui适合的平台 的文章

 

随机推荐