font-size | 易学教程

面向对象的插件开发

阅读更多关于面向对象的插件开发

我们新建一个对象命名为Beautifier,然后我们在插件里使用这个对象来编码 //定义 Beautifier的构造函数,然后我们在插件里使用这个对象来编码 var Beautifier=function(ele,opt){ 　　this.$element=ele, 　　this.defaults={ 　　　　'color':red, 　　　　'font-size':'12px', 　　　　'text-Decoration':'none' 　　}, 　　this.options=$.extend({},this.defaults,opt) } //定义Beautifier的方法 Beautifier.prototype={ 　　beautify:function(){ 　　　　return this.$element.css({ 　　　　　　'color':this.options.color, 　　　　　　'font-size':this.options.fontSize, 　　　　　　'text-Decoration':this.options.textDecoration 　　　　}); 　　} } //在插件中使用Beautifier对象 $.fn.myPlugin=function(options){ 　　//创建Beautifier的实体　　var

Change font size without messing with Tkinter button size

阅读更多关于 Change font size without messing with Tkinter button size

问题 I am having trouble changing the font size of a button in Tkinter, when I attempt to do it the button also expands/contracts based on the size of the text. Is there a way I can alter the text size with the button's size anchored in place? I ran across this while designing a tic-tac-toe application, however to save you the trouble, here is a very minimal example of the problem in practice: import Tkinter as tk MyWindow = tk.Tk() MyWindow.geometry("500x550") button = tk.Button(MyWindow,text=

移动端适配方案总结(二)

阅读更多关于移动端适配方案总结(二)

拉钩webapp 　　 1. 设置<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"> 　　2. 设置 html { font-size: 65.5% ；}（10.48px = 16px*65.5% = 1rem ) 　　3 .顶部与底部的bar不管分辨率怎么变，它的高度和位置都不变, 每个列表的高度也不变　　4. 设置文本字体例如 16px时 { font-size: 1.6rem；} 淘宝webapp (1）动态设置viewport的scale 　　var scale = 1 / devicePixelRatio; document.querySelector('meta[name="viewport"]') 　　.setAttribute('content','initial-scale=' + scale + ', maximum-scale=' + scale + ', minimum-scale=' + scale + ', user-scalable=no'); （2）动态计算html的font-size 　　document.documentElement

手机端布局

阅读更多关于手机端布局

http://caibaojian.com/mobile-responsive-example.html 它是根据什么计算的，这就跟设计稿有关了，拿网易来说，它的设计稿应该是基于iphone4或者iphone5来的，所以它的设计稿竖直放时的横向分辨率为640px，为了计算方便，取一个100px的font-size为参照，那么body元素的宽度就可以设置为width: 6.4rem，于是html的font-size=deviceWidth / 6.4。这个deviceWidth就是viewport设置中的那个deviceWidth。根据这个计算规则，可得出本部分开始的四张截图中html的font-size大小如下： · //code from http://caibaojian.com/mobile-responsive-example.html deviceWidth = 320，font-size = 320 / 6.4 = 50px deviceWidth = 375，font-size = 375 / 6.4 = 58.59375px deviceWidth = 414，font-size = 414 / 6.4 = 64.6875px deviceWidth = 500，font-size = 500 / 6.4 = 78.125px （1

从网易与淘宝的font-size思考前端设计稿与工作流

阅读更多关于从网易与淘宝的font-size思考前端设计稿与工作流

互联网上的自适应方案到底有几种呢？就我个人实践所知，有这么几种方案：固定一个某些宽度，使用一个模式，加上少许的媒体查询方案使用flexbox解决方案使用百分比加媒体查询使用 rem 淘宝最近开源的一个框架和网易的框架有同工之异。都是采用 rem 实现一稿解决所有设置自适应。在没出来这种方案之前，第一种做法的人数也不少。类似以下说到的拉钩网。看一下流云诸葛的文章。以下摘自：从网易与淘宝的font-size思考前端设计稿与工作流 1. 简单问题简单解决我觉得有些 web app并一定很复杂，比如拉勾网，你看看它的页面在iphone4,iphone6,ipad下的样子就知道了：它的页面有一个特点，就是：顶部与底部的bar不管分辨率怎么变，它的高度和位置都不变中间每条招聘信息不管分辨率怎么变，招聘公司的图标等信息都位于条目的左边，薪资都位于右边这种app是一种典型的弹性布局：关键元素高宽和位置都不变，只有容器元素在做伸缩变换。对于这类app，记住一个开发原则就好：文字流式，控件弹性，图片等比缩放。以图描述：这个规则是一套基本的适配规则，对于这种简单app来说已经足够，同时它也是后面要说的 rem 布局的基础。另外对于拉勾这种app可能需要额外媒介查询对布局进行调整的就是小屏幕设备。举例来说，因为现在很多设计稿是根据iphone6的尺寸来的

从网易与淘宝的font-size思考前端设计稿与工作流

阅读更多关于从网易与淘宝的font-size思考前端设计稿与工作流

转自： http://www.cnblogs.com/lyzg/ 阅读目录 1. 问题的引出 2. 简单问题简单解决 3. 网易的做法 4. 淘宝的做法 5. 比较网易与淘宝的做法 6. 如何与设计协作 7. 总结本文结合自己对网易与淘宝移动端首页html元素上的font-size这个属性的思考与学习，讨论html5设计稿尺寸以及前端与设计之间协作流程的问题，内容较多，但对你的技术和工作一定有价值，欢迎阅读和点评：）。 1. 问题的引出最近阅读白树的博文《移动web资源整理》时，他在博文中有一段指出，如果html5要适应各种分辨率的移动设备，应该使用rem这样的尺寸单位，同时给出了一段针对各个分辨率范围在html上设置font-size的代码： html{font-size:10px} @media screen and (min-width:321px) and (max-width:375px){html{font-size:11px}} @media screen and (min-width:376px) and (max-width:414px){html{font-size:12px}} @media screen and (min-width:415px) and (max-width:639px){html{font-size:15px}} @media

CSS单位解释.

阅读更多关于 CSS单位解释.

长度单位主要有以下几种em ex ch rem vw vh vm cm mm in pt pc px %，大概可以分为几种“绝对单位”和“相对单位”和“百分比单位”。绝对单位：px in cm mm 相对单位：em rem pt pc ex ch 百分比单位：vw vh vm % 下面主要说几个常用的单位 px：绝对单位，页面按精确像素展示 em：相对单位，基准点为父节点字体的大小，如果自身定义了font-size按自身来计算（浏览器默认字体是16px），整个页面内1em不是一个固定的值。 rem：相对单位，可理解为”root em”, 相对根节点html的字体大小来计算，CSS3新加属性，chrome/firefox/IE9+支持。　　　rem在移动端应用可参考淘宝的页面http://m.taobao.com vw：viewpoint width，视窗宽度，1vw等于视窗宽度的1%。 vh：viewpoint height，视窗高度，1vh等于视窗高度的1%。 vmin：vw和vh中较小的那个。 vmax：vw和vh中较大的那个。　　　　vw, vh, vmin, vmax：IE9+局部支持，chrome/firefox/safari/opera支持，ios safari 8+支持，android browser4.4+支持，chrome for android39支持

移动端常用单位（%和rem）

阅读更多关于移动端常用单位（%和rem）

px % em （ font-size的值就是 1em，如果自身没有设置font-size，则去找父元素的；常用于 text-indent:2em 来缩进两个字符） rem（html的font-size的大小，就是1rem ；rem是相对于根元素<html>，即rem继承的是html的font-size，不是body！！！） vw （100vw表示视口宽度的1%）由于兼容性的问题，vw vh 这种视口单位用的不是很多在PC端的开发工具中，模拟移动端最小字体规定是12px，小于12px的统一按照12px来目前在移动端，rem是主流案例： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no,maximum-scale=1,minimum-scale=1"> <title>Document</title> <link rel="stylesheet" href="font/iconfont.css"> <style> *{margin:0;padding:0;box-sizing:border-box;} body{background

web app变革之rem

阅读更多关于 web app变革之rem

rem这是个低调的css单位，近一两年开始崭露头角，有许多同学对rem的评价不一，有的在尝试使用，有的在使用过程中遇到坑就弃用了。但是我对rem综合评价是用来做web app它绝对是最合适的人选之一。 rem是什么？ rem（font size of the root element）是指相对于根元素的字体大小的单位。简单的说它就是一个相对单位。看到rem大家一定会想起em单位，em（font size of the element）是指相对于父元素的字体大小的单位。它们之间其实很相似，只不过一个计算的规则是依赖根元素一个是依赖父元素计算。为什么web app要使用rem？这里我特别强调web app，web page就不能使用rem吗，其实也当然可以，不过出于兼容性的考虑在web app下使用更加能突显这个单位的价值和能力，接下来我们来看看目前一些企业的web app是怎么做屏幕适配的。 1、实现强大的屏幕适配布局：最近iphone6一下出了两款尺寸的手机，导致的移动端的屏幕种类更加的混乱，记得一两年前做web app有一种做法是以320宽度为标准去做适配，超过320的大小还是以320的规格去展示，这种实现方式以淘宝 web app为代表作，但是近期手机淘宝首页进行了改版，采用了rem这个单位，首页以内依旧是和以前一样各种混乱，有定死宽度的页面，也有那种流式布

移动端常见bug

阅读更多关于移动端常见bug

meta基础知识 H5页面窗口自动调整到设备宽度，并禁止用户缩放页面 <meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" /> 忽略将页面中的数字识别为电话号码 <meta name="format-detection" content="telephone=no" /> 忽略Android平台中对邮箱地址的识别 <meta name="format-detection" content="email=no" /> 当网站添加到主屏幕快速启动方式，可隐藏地址栏，仅针对ios的safari <meta name="apple-mobile-web-app-capable" content="yes" />  将网站添加到主屏幕快速启动方式，仅针对ios的safari顶端状态条的样式 <meta name="apple-mobile-web-app-status-bar-style" content="black" />  viewport模板

订阅 font-size