font-size | 易学教程

UIButton frame does not increase with accessibility large font using Swift 5

阅读更多关于 UIButton frame does not increase with accessibility large font using Swift 5

问题 Large accessibility font size for UIButton title (.body or .headline) does not increase the frame of button but only increase the title text. It can clearly be seen in the screenshot below: Constraints are only top, leading and trailing, also in code I have added 2 lines: button.adjustsImageSizeForAccessibilityContentSizeCategory = true button.titleLabel?.numberOfLines = 0 The yellow background colour is of the button, thus identifying that only tappable area is the yellow area. I want to

手机端的屏幕自适应(一)

阅读更多关于手机端的屏幕自适应(一)

通过rem布局只要引入这个代码： (function (doc, win) { var docEl = doc.documentElement, resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize', recalc = function () { var clientWidth = docEl.clientWidth; if (!clientWidth) return; if(clientWidth>=640){ docEl.style.fontSize = '100px'; }else{ docEl.style.fontSize = 100 * (clientWidth / 640) + 'px'; } }; if (!doc.addEventListener) return; win.addEventListener(resizeEvt, recalc, false); doc.addEventListener('DOMContentLoaded', recalc, false); })(document, window); 如何使用？这是rem布局的核心代码，这段代码的大意是：如果页面的宽度超过了640px，那么页面中html的font-size恒为100px，否则

web前端入门到实战：css选择器和css文本样式相关

阅读更多关于 web前端入门到实战：css选择器和css文本样式相关

【文章来源微信公众号：每天学编程】--- 关注，后台领取编程资源 css基础-css选择器和css文本样式相关：使用link链入外部样式，页面加载时会同时加载样式 @import url(“*.css”);使用导入式，页面加载完后，才会加载样式链接伪类的顺序 :link-> :visited ->:hover-> :active 或者 : visited -> : link ->:hover-> :active 选择器的优先级： id选择器>class选择器>标签选择器如果设置了同样的类样式，类样式与元素里类的顺序没有关系，取决于哪个样式离需要引用样式的元素最近就用哪个，所以div里的文字颜色是“橘色“ 选择器权值：标签选择器：1 类和伪类选择器：10 id选择器：100 通配符选择器：0 行内样式：1000 !important：优先级最最高权值不同时，根据权值判断样式；权值相同时，根据就近原则判断样式常用选择器： input:focus p:first-letter p元素的首字母 p:first-line p元素的首行 serif字体和sans-serif字体的区别： sans-serif有修饰 sans-serif无修饰 font-style:normal/italic/oblique 正常斜体倾斜 font简写顺序： font-style font

关于首页顶部轮播图中文字缩放

阅读更多关于关于首页顶部轮播图中文字缩放

banner about 新增小屏文字居中 500/ .col-xs-8 { width: 100%; text-align: center !important; } 1 /* 顶部轮播图中文字设置缩放 */ 2 媒介查询 500px缩放0.4 768缩放0.7 992缩放0.7 3 #banner .home .text { 4 transform: scale(0.4); 5 transform-origin: left top; 6 } 7 /* css样式 */ 8 #banner .home { 9 position: relative; 10 } 11 #banner .home .text { 12 position: absolute; 13 top: 11vw; 14 left: 11vw; 15 text-transform: uppercase; 16 color: #000; 17 } 18 #banner .home .text h2 { 19 line-height: 6rem; 20 font-size: 6rem; 21 font-family: 'Oswald-Light'; 22 font-weight: bold; 23 padding-bottom: 10px; 24 color: #fff; 25 } 26 #banner .home

移动端布局

阅读更多关于移动端布局

学习笔记@逆战班移动端的布局主要分为四类，分别是流式布局，rem布局，响应式布局和弹性布局。四种布局都能很好的适应手机屏幕分辨率。 1 、流式布局：通过设置viewport可视窗口： <meta name="viewport" content="width=device-width, initial-scale=1.0"> 布局窗口等于可视窗口。这样的布局方式，就是移动web 开发使用的常用布局方式。这样的布局可以适配移动端不同的分辨率设备。流式布局优点是大屏幕下能显示更多内容，充分利用可视空间，使用户能在大分辨率的屏幕下获取更多信息。但是在相对较宽的比例下会有些不协调，屏幕显示的内容可能会不对称。 2、 rem布局首先，1rem等于html标签的font-size值，rem布局就是通过在不同分辨率下html的font-size值的调节，适配不同的设备进行等比缩放。这时候又引进了一个新的单位“VW”，通过VW、rem、html的font-size值三个单位的转换，达到rem布局。屏幕分成100等份。1%等于1vw，根据iphone6、7、8下屏幕分辨率是375px，可得1vw == 3.75px，100px == 26.666667vw，所以设置html根元素的font-size值为26.666667vw，在iphone6、7、8下同样的100px等于100px，iphone6

rem vh vw vmin vmax ex ch

阅读更多关于 rem vh vw vmin vmax ex ch

rem 我们首先介绍下和我们熟悉的很相似的货。 em 被定义为相对于当前对象内文本的字体大小。如果你给body小哥设置了font-size字体大小，那么body小哥的任何子元素的1em就是等于body设置的font-size。 body { font-size: 14px; } div { font-size: 1.2em; // calculated at 14px * 1.2, or 16.8px } 你看，这里div的字体大小是1.2em。解释来说，就是他从body那里继承的字体大小（这里是14px）的1.2倍，结果就是16.8px。但是，如果你用em一层一层级联得定义嵌套元素的字体大小又会花生什么事情呢？在下面这一小段代码里我们应用了和上面一样一样的CSS，每一个div都从它上一级父元素继承了字体大小，并且逐渐得增加。例子虽然在某些地方这正是我们想要的，但是通常情况下我们还是希望就依赖单一的相对度量单位就好。这时候嘛，我们就可以使用 rem 了。‘r’是“root”的缩写，意思就是1rem等于根元素的字体大小；大部分情况下，根元素就是元素了。 html { font-size: 14px; } div { font-size: 1.2rem; } 这样在上面的那三个嵌套的div的字体大小都是 1.2*14px = 16.8px 了。适用于网格布局 Rems

可编辑的table（原生JS+jQuery）

阅读更多关于可编辑的table（原生JS+jQuery）

原生js： <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>Table</title> <style type="text/css"> body{ font-size:12px} #tab{ border-collapse: collapse;} .edit{ height:16px; width:98%; background-color:#EFF7FF; font-size:12px; border:0px;} #tab thead td{ background:url(/upload/201005/20100531233452190.bmp);color:#183C94} #tab tbody td{ overflow:hidden} #tab td{border: 1px solid #CECFCE;height:20px

CentOS升级Python2.7及安装pip

阅读更多关于 CentOS升级Python2.7及安装pip

*/ /*--> */ CentOS升级Python2.7及安装pip CentOS升级Python2.7及安装pip 1) 升级Python2.7 ? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 python -V # 查看版本：Python 2.6 . 6 mkdir -p ~/Env/python; cd ~/Env/python # 创建个目录 wget --no-check-certificate https: //www.python.org/ftp/python/2.7.6/Python-2.7.6.tar.xz tar Jxvf Python- 2.7 . 6 .tar.xz cd Python- 2.7 . 6 ./configure --prefix=/usr/local/py- 2.7 . 6 # "./configure -h" 查看帮助 make # 报模块缺失时，有需要的安装后重make # issue: INFO: Can't locate Tcl/Tk libs and/or headers # Python build finished, but the necessary bits to build these

webpack 多应用项目搭建

阅读更多关于 webpack 多应用项目搭建

前言: 　　多应用在实际的项目中使用场景也是比较多的，话不多说，直接进入搭建过程项目搭建: 　　请参考之前的 webpack项目搭建笔记，此处不再过度讲解，项目结构如下 app1.html 1 <!DOCTYPE html> 2 <html style="font-size:20px"> 3 <head> 4 <meta charset="utf-8"> 5 <title>app1</title> 6 </head> 7 <body> 8 <div id="app1"></div> 9 </body> 10 </html> app2.html 1 <!DOCTYPE html> 2 <html style="font-size:20px"> 3 <head> 4 <meta charset="utf-8"> 5 <title>app2</title> 6 </head> 7 <body> 8 <div id="app2"></div> 9 </body> 10 </html> webpack.config.js-运用了HtmlWebpackPlugin插件，有兴趣的同学可参考 HtmlWebpackPlugin 1 const HtmlWebpackPlugin = require('html-webpack-plugin'); 2 const {

Chrome谷歌浏览器下不支持css字体小于12px的解决办法

阅读更多关于 Chrome谷歌浏览器下不支持css字体小于12px的解决办法

转自： https://www.cnblogs.com/jiangxiaobo/p/5669976.html 先来看下 ie、火狐、谷歌浏览器下各个字体显示情况 ie下：火狐下：谷歌下：从上面的图可以很明显看出谷歌下 css设置字体大小为12px及以下时，显示都是一样大小，都是默认12px; 那么网上一直有一个方法就是给当前样式添加谷歌私有属性：-webkit-text-size-adjust:none; 可是我进行验证后发现，在谷歌现在的新版本里已经无效。那么我们应该如何设置谷歌下的字体呢？我们可以使用到 css3里的一个属性： transform:scale() 属性介绍可以戳这里： http://www.w3chtml.com/css3/properties/2d-transform/transform.html 这个属性前给-webkit-谷歌前缀，那么就可以控制字体的大小，代码如下： 1 2 3 4 5 6 7 < style > p{font-size:10px;-webkit-transform:scale(0.8);} /*这里的数字0.8，是缩放比例，可以根据情况变化。*/ </ style > < p >中梦测试10px</ p > 如下图：但是要注意一点，如果这个<p>元素有背景的话，给这个属性会使背景也随着变化，所以，我们可以给<p>标签里再套个

订阅 font-size