数字世界网

可视化大屏经验分享

1、左1图，不建议在饼图内与百分比数值一起显示，饼图本身的形状和大小，文字过多时容易溢出，如果出现一个2%一个1%，就很难辨别图形指向，这样也就失去了数据可视化的意义，PPT通常有这样的设计样式，因为是个死图。

如何高效快速的开发多终端自适应网页

1、在网页代码的头部，加入一行viewport元标签。

2、在HTML头部增加viewport标签。在网站HTML文件的开头，增加viewport meta标签告诉浏览器视口宽度等于设备屏幕宽度，且不进行初始缩放。

3、其次，除了布局和文本，”自适应网页设计”还必须实现图片的自动缩放。有条件的话，比较好还是根据不同大小的屏幕，加载不同分辨率的图片。有很多方法可以做到这一条，服务器端和客户端都可以实现。

4、一HTMLCSS3为基础，因此现在能够将这两种技术运用到恰到好处的网站设计师并不多见，如果设计师对这两种技术不够精通，会导致就算设计师做出很棒的页面，但是实现以后，不会完全一模一样。

通过vh和vw适配大屏项目和不同分辨率浏览器

vh：viewpointheight，视窗高度，1vh等于视窗高度的1%。vmin：vw和vh中较小的那个。vmax：vw和vh中较大的那个。

和使用rem单位一样，vh vw也可以通过计算函数使用，这样更加方便。Sass函数：以移动端PSD设计稿 宽为750px，高为1250px为例。拿dom在设计稿内的尺寸比例 乘以 100vh/vw ，得到了在当前视口的尺寸占比。

可根据需要灵活掌握。在PC中，视口的长宽则是跟浏览器窗口的物理分辨率恒等的。1vw等于视口宽度（viewport width）的百分之一，也就是说100vw就是视口的宽度。同理，1vh等于视口高度（viewport height）的百分之一。