<?xml version="1.0" encoding="utf-8" ?><rss version="2.0"><channel><title><![CDATA[布丁黑板报]]></title><description><![CDATA[好记性不如烂博客]]></description><link>https://blog.youkuaiyun.com/budinger</link><language>zh-cn</language><generator>https://blog.youkuaiyun.com/</generator><copyright><![CDATA[Copyright &copy; budinger]]></copyright><item><title><![CDATA[CSS 中等比例缩放的演变：从传统技巧到 aspect-ratio 属性]]></title><link>https://blog.youkuaiyun.com/budinger/article/details/146041625</link><guid>https://blog.youkuaiyun.com/budinger/article/details/146041625</guid><author>budinger</author><pubDate>Wed, 05 Mar 2025 13:59:43 +0800</pubDate><description><![CDATA[本文将详细介绍在 CSS 技术不断演进过程中，开发者如何从传统的 hack 技巧实现等比例缩放，到如今借助 CSS 原生的 aspect-ratio 属性实现更简洁、易用的解决方案，同时讨论相关的兼容性问题及未来发展趋势。由于 padding 的百分比是相对于父元素的宽度计算的，所以可以通过设置一个容器的 padding-bottom 值来实现宽高比的控制。使用 aspect-ratio 属性，开发者可以轻松设置容器比例，无需借助复杂的嵌套结构，从而实现更为直观的布局控制。另一种方式是通过伪元素来实现。]]></description><category></category></item><item><title><![CDATA[五分钟带你了解获取el-upload上传图片的宽高]]></title><link>https://blog.youkuaiyun.com/budinger/article/details/124635066</link><guid>https://blog.youkuaiyun.com/budinger/article/details/124635066</guid><author>budinger</author><pubDate>Sat, 07 May 2022 17:14:06 +0800</pubDate><description><![CDATA[接到一个新要求：需要获取上传图片的尺寸等一些信息，并对上传元素进行一些限制。
话不多说直接开撸！

思路

上传图片完成后，会获取到文件的基本信息。通过构造函数FilerReader将其转换成Base64。通过Image对象获取图片的宽高，下一步按照需求进行必要判断。

实操

html部分


&lt;el-upload
  action=""
  :http-request="uploadFile"
  :show-file-list="false"
  :disabled="loading"
...]]></description><category></category></item><item><title><![CDATA[JavaScript对象声明]]></title><link>https://blog.youkuaiyun.com/budinger/article/details/53781548</link><guid>https://blog.youkuaiyun.com/budinger/article/details/53781548</guid><author>budinger</author><pubDate>Wed, 21 Dec 2016 10:44:43 +0800</pubDate><description><![CDATA[对象的声明==创建object对象有两种方式==第一种方式：使用new操作符后跟object构造函数var person = new Object();
person.name = "张三";
person.age = 30;第二种方式：使用对象字面量表示法var person = {
    name ："张三",
    age ：29
};使用对象字面量语法时，属性名也可以使用字符串，如下(=]]></description><category></category></item><item><title><![CDATA[动图展示16个Sublime Text快捷键用法]]></title><link>https://blog.youkuaiyun.com/budinger/article/details/42147857</link><guid>https://blog.youkuaiyun.com/budinger/article/details/42147857</guid><author>budinger</author><pubDate>Thu, 25 Dec 2014 16:31:34 +0800</pubDate><description><![CDATA[在我做了一次包含一些现场编码的演示后，一些观众问我是如何操作这么快。当然这里没有唯一的答案，答案是一堆简单的快捷键和大量的实践的组合。为了回应那些询问，我觉得有必要看看我每天想都不用想且使用的快捷键。

这里有一个15 16 个快捷键的精选列表(1个自定义快捷键)，以gif动画展示，我每天使用。享受吧!

(译者注：原文所列快捷键均为OS X环境，为了方便Windows和Linux环境童鞋]]></description><category></category></item><item><title><![CDATA[关于inline-block的兼容测试]]></title><link>https://blog.youkuaiyun.com/budinger/article/details/40261423</link><guid>https://blog.youkuaiyun.com/budinger/article/details/40261423</guid><author>budinger</author><pubDate>Sun, 19 Oct 2014 11:51:34 +0800</pubDate><description><![CDATA[首先说下inline、block、inline-block的区别
inline：行内元素显示前后无换行符
block：块级元素
inline-block： 行内块元素
重点说下inline-block这个属性。经过测试当display：inline-block的时候，本身为块元素的HTML标签（比如 div等）应用此样式在IE8+、chrome、firefox 会将块元素转换成行内元素，但]]></description><category></category></item><item><title><![CDATA[淘宝的reset css]]></title><link>https://blog.youkuaiyun.com/budinger/article/details/38112109</link><guid>https://blog.youkuaiyun.com/budinger/article/details/38112109</guid><author>budinger</author><pubDate>Fri, 25 Jul 2014 11:41:25 +0800</pubDate><description><![CDATA[blockquote,body,button,dd,dl,dt,fieldset,form,h1,h2,h3,h4,h5,h6,hr,input,legend,li,ol,p,pre,td,textarea,th,ul {margin:0;padding:0}
body,button,input,select,textarea {	font:12px/1.5 tahoma,arial,'Hirag]]></description><category></category></item><item><title><![CDATA[引用外部CSS的link和import方式的分析与比较]]></title><link>https://blog.youkuaiyun.com/budinger/article/details/37761241</link><guid>https://blog.youkuaiyun.com/budinger/article/details/37761241</guid><author>budinger</author><pubDate>Mon, 14 Jul 2014 14:21:47 +0800</pubDate><description><![CDATA[多网页中的 CSS 链接与引用是这样写的：

 

@import url("http://www.abaonet.com/abc.css");
 


 
而很多网站使用的都是 link

 


 
　　而像 google 百度 163等网站它们都是直接写在网页中。
　　当然使用链接 link 和导入 import 的好处就是易于维护，但当网速比较慢的时候，会出
　　现]]></description><category></category></item><item><title><![CDATA[IE10 的一些前端有关的特性]]></title><link>https://blog.youkuaiyun.com/budinger/article/details/37598159</link><guid>https://blog.youkuaiyun.com/budinger/article/details/37598159</guid><author>budinger</author><pubDate>Wed, 09 Jul 2014 14:34:00 +0800</pubDate><description><![CDATA[.ie{color:red;          /* for all browsers*/
_color:green;       /* hack for IE6*/
*color:black;       /* hack for IE6 IE7*/
color:white\9;      /* hack for IE6+(IE6 IE7 IE8 IE9 IE10)*/
color:yellow\]]></description><category></category></item><item><title><![CDATA[css实现强制不换行/自动换行/强制换行]]></title><link>https://blog.youkuaiyun.com/budinger/article/details/37559707</link><guid>https://blog.youkuaiyun.com/budinger/article/details/37559707</guid><author>budinger</author><pubDate>Tue, 08 Jul 2014 10:12:59 +0800</pubDate><description><![CDATA[强制不换行 
div{
white-space:nowrap;
}


自动换行


div{ 
word-wrap: break-word; 
word-break: normal; 
}


强制英文单词断行


div{
word-break:break-all;
}


 


CSS设置不转行：




overflow:hi]]></description><category></category></item><item><title><![CDATA[媒体查询]]></title><link>https://blog.youkuaiyun.com/budinger/article/details/26353869</link><guid>https://blog.youkuaiyun.com/budinger/article/details/26353869</guid><author>budinger</author><pubDate>Tue, 20 May 2014 11:35:27 +0800</pubDate><description><![CDATA[〈link rel="stylesheet" type="text/css" media="screen" href="screen-styles.css">

〈link rel="stylesheet" media="screen and (orientation:portrait)" href="portrait-screen.css">
//纵向放置的显示屏设备

〈link r]]></description><category></category></item><item><title><![CDATA[前端高手也不能错过的css常识]]></title><link>https://blog.youkuaiyun.com/budinger/article/details/22828487</link><guid>https://blog.youkuaiyun.com/budinger/article/details/22828487</guid><author>budinger</author><pubDate>Wed, 02 Apr 2014 23:08:07 +0800</pubDate><description><![CDATA[1、不要实用过小的图片做背景平铺。举例宽高都是1px的图片用做背景平铺太耗费资源。1px 背景图。拼一个200*200像素的区域需要渲染40000次。耗费可不是一点半点
2、无边框。推荐的写法是 border:none。 border:0; 只是定义边框宽度为零，但边框样式、颜色还是会被浏览器解析，占用资源。不过有个特点border：0  占用空间比border：none 少三个字节
3、慎用]]></description><category></category></item><item><title><![CDATA[解决iphone横屏时字体变大问题最佳方法]]></title><link>https://blog.youkuaiyun.com/budinger/article/details/22681163</link><guid>https://blog.youkuaiyun.com/budinger/article/details/22681163</guid><author>budinger</author><pubDate>Mon, 31 Mar 2014 17:25:44 +0800</pubDate><description><![CDATA[前提修改文档声明，如有疑问，请看文章手机web2.0网页文档属性

@media
 screen and (max-device-width: 320px){body{-webkit-text-size-adjust:none}}

@media
 screen and (max-device-width: 480px){body{-webkit-text-size-adjust:no]]></description><category></category></item><item><title><![CDATA[WEBAPP开发技巧小结(手机网站开发注意事项)]]></title><link>https://blog.youkuaiyun.com/budinger/article/details/21236003</link><guid>https://blog.youkuaiyun.com/budinger/article/details/21236003</guid><author>budinger</author><pubDate>Fri, 14 Mar 2014 14:24:17 +0800</pubDate><description><![CDATA[1、要响应式开发web，也就是页面必须自适应屏幕大小，可以采用流体布局，如之前的文章（自适应宽度布局），其他具体的小问题可以采用media query解决（让IE支持CSS3 Media Query实现响应式Web设计和CSS3
 Media Queries）； 
2、因为手机大多是高级浏览器，可以使用html5+css3开发； 
3、合理灵活的使用meta标签，具体如下； 



]]></description><category></category></item><item><title><![CDATA[CSS reset & 闭合div 适用于HTML5]]></title><link>https://blog.youkuaiyun.com/budinger/article/details/21120901</link><guid>https://blog.youkuaiyun.com/budinger/article/details/21120901</guid><author>budinger</author><pubDate>Wed, 12 Mar 2014 22:03:38 +0800</pubDate><description><![CDATA[/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr]]></description><category></category></item><item><title><![CDATA[点九：避免Andriod平台图片失真的图片形式]]></title><link>https://blog.youkuaiyun.com/budinger/article/details/21112833</link><guid>https://blog.youkuaiyun.com/budinger/article/details/21112833</guid><author>budinger</author><pubDate>Wed, 12 Mar 2014 20:31:17 +0800</pubDate><description><![CDATA[“点九”是andriod平台的应用软件开发里的一种特殊的图片形式，文件扩展名为：.9.png

智能手机中有自动横屏的功能,同一幅界面会在随着手机(或平板电脑)中的方向传感器的参数不同而改变显示的方向,在界面改变方向后,界面上的图形会因为长宽的变化而产生拉伸,造成图形的失真变形。

我们都知道android平台有多种不同的分辨率，很多控件的切图文件在被放大拉伸后，边角会模糊失真。

O]]></description><category></category></item><item><title><![CDATA[APP界面设计指南|APP界面设计师必备信息图]]></title><link>https://blog.youkuaiyun.com/budinger/article/details/21012361</link><guid>https://blog.youkuaiyun.com/budinger/article/details/21012361</guid><author>budinger</author><pubDate>Tue, 11 Mar 2014 14:15:00 +0800</pubDate><description><![CDATA[013年，APP界面设计已经越来越受到大家的关注和热捧！作为一个接触APP界面设计的老鸟，网站设计师们。一定得记住：用户体验设计放在首位！

信息图：移动端APP设计指南
APP界面设计指南|APP界面设计师必备信息图]]></description><category></category></item><item><title><![CDATA[iPhone、iPad等iOS系统界面设计字体规范]]></title><link>https://blog.youkuaiyun.com/budinger/article/details/21010177</link><guid>https://blog.youkuaiyun.com/budinger/article/details/21010177</guid><author>budinger</author><pubDate>Tue, 11 Mar 2014 13:45:53 +0800</pubDate><description><![CDATA[做移动UI设计的朋友们肯定都知道，移动客户端的界面上做效果的时候提前找所用的字体，特别注意在windows下设计的字体和实际UI界面上显示的效果很大的差别。

博主谈到设计师可以提前和开发沟通好，就是告诉开发字体和字间距之类的需要自定义，请程序提前做好“准备”（一般字体和字的效果程序都是可以提前封装后，整个项目都可以导出自定义），如果提前沟通，这样会提高开发和设计的UI界面的效率。确实是这样啊]]></description><category></category></item><item><title><![CDATA[ipad界面设计规范,新手设计iPad的必备宝典]]></title><link>https://blog.youkuaiyun.com/budinger/article/details/21009749</link><guid>https://blog.youkuaiyun.com/budinger/article/details/21009749</guid><author>budinger</author><pubDate>Tue, 11 Mar 2014 13:40:03 +0800</pubDate><description><![CDATA[平台特点

1 大屏幕，分辨率 1024×768
2 再次强调没有固定的方向，必须四个方向都支持。
3 可以外接键盘
4 可以放置设备，与台式机同步



iPhone与iPad的共同特点

- 内存有限
- 同时运行单个程序
- 在设置功能里放置程序选项
- 设备方向可以改变
- 最小化的帮助，让用户直接就能看懂
- 程序响应手势而不是鼠标
- 运行源生程序、W]]></description><category></category></item><item><title><![CDATA[Android APPUI设计、切图的常用尺寸大全]]></title><link>https://blog.youkuaiyun.com/budinger/article/details/21000465</link><guid>https://blog.youkuaiyun.com/budinger/article/details/21000465</guid><author>budinger</author><pubDate>Tue, 11 Mar 2014 11:04:28 +0800</pubDate><description><![CDATA[今天在APPUI设计群里 ，不少朋友在问  android APPUI设计、切图的常用尺寸到底是多少？很不清楚，所以老谭在此跟大家分享下。

Android 系统就被设计为一个可以在多种不同分辨率的设备上运行的操作系统。对于应用程序来说，系统平台向它们提供的是一个稳定的，跨平台的运行环境，而关于如何将程序以正确的方式显示到它所运行的平台上所需要的大部分技术细节，都由系统本身进行了处理，无需程序]]></description><category></category></item><item><title><![CDATA[Android应用程序UI界面设计官方权威解读]]></title><link>https://blog.youkuaiyun.com/budinger/article/details/20999793</link><guid>https://blog.youkuaiyun.com/budinger/article/details/20999793</guid><author>budinger</author><pubDate>Tue, 11 Mar 2014 10:57:29 +0800</pubDate><description><![CDATA[据某媒体报道，2012年国内安卓手机市场占有率达到了36%！可以肯定是 Android 智能手机已经融入到了我们的生活。然而，Android 应用界面设计相对于iphone的界面设计来说，稍有逊色。于是，Android 团队宣布推出官方“安卓设计（ Android Design）网站，就 Android 的主要界面特征对开发者进行设计指导。



Android的应用界面设计重点围绕三个总]]></description><category></category></item></channel></rss>