font | 易学教程

移动端自适应方式

阅读更多关于移动端自适应方式

一、第一种方式是比较简单的，开发速度也比较快。主要利用-webkit-transform:scale()这个属性，比较设计稿和当前屏幕的宽度，或者高度，亦或者取两者的最小值，来进行自适应。 1. 如果宽度自适应，如果兼容iphoneX的话，此时的设计稿的背景图需要延长至1448，内容放在1206内，然后可以把背景图设在一个宽高100%的容器内，background-size:100% auto，需要进行宽度自适应的内容统一放在一个容器内，居中，然后用js统一缩放这个容器，已达到自适应的效果； 2. 如果高度自适应，兼容iphoneX的设计稿需要调整成1218*936，内容放在629中间，进行高度自适应缩放。 3.还有一种就是取两者的最小的那个来自适应。原理同上。二、比较简单的页面适配比如顶部与底部的bar不管分辨率变化，高度和位置不变，中间的内容不管分辨率怎么变，都会位于左右两边等这种简单的布局的开发原则是： 1、文字流式（使用文字随着窗口变化自动换行） 2、控件弹性（flex布局） 3、图片等比缩放等。三、网易的做法动态计算html根元素的font-size，进而通过rem进行适配。如果设计稿横向分辨率是640px,为了计算方便，取100px的font-size为参照，那么body元素的宽度可以设置为6.4rem，于是html的font-size

移动前端自适应适配布局解决方案

阅读更多关于移动前端自适应适配布局解决方案

方案：固定一个某些宽度，使用一个模式，加上少许的媒体查询方案使用flexbox解决方案使用百分比加媒体查询使用 rem 1. 简单问题简单解决我觉得有些 web app并一定很复杂，比如拉勾网，你看看它的页面在iphone4,iphone6,ipad下的样子就知道了：它的页面有一个特点，就是：顶部与底部的bar不管分辨率怎么变，它的高度和位置都不变中间每条招聘信息不管分辨率怎么变，招聘公司的图标等信息都位于条目的左边，薪资都位于右边这种app是一种典型的弹性布局：关键元素高宽和位置都不变，只有容器元素在做伸缩变换。对于这类app，记住一个开发原则就好：文字流式，控件弹性，图片等比缩放。以图描述：这个规则是一套基本的适配规则，对于这种简单app来说已经足够，同时它也是后面要说的rem布局的基础。另外对于拉勾这种app可能需要额外媒介查询对布局进行调整的就是小屏幕设备。举例来说，因为现在很多设计稿是根据iphone6的尺寸来的，而iphon6设备宽的逻辑的像素是375px，而iphone4的逻辑像素是320个像素，所以如果你根据设计稿做出来的东西，在iphone4里面可能显示不下，比如说拉钩网底部那个下载框，你对比看下就知道了，这是4：这是6： · 6下面两边的间距比4多很多，说明拉勾对4肯定是做过适配的，从代码也可以证实这一点：

前端适配之细说rem（网易的移动端页面布局做法）

阅读更多关于前端适配之细说rem（网易的移动端页面布局做法）

　　rem指的是根元素的字体大小，多数根元素大小为16px,但设备的dpi会影响根元素的大小，因此并不是固定的。　　所谓rem布局就是指为文档的根节点<html>元素设置一个基准字体大小，然后所有的元素尺寸都以rem为单位来写。　　使用rem布局结合在html 上根据不同分辨率设置不同font-size有很多不好解决的麻烦,那应该如何解决呢？我们可以通过JS来计算不同分辨率下，font-size的大小，这是在我研究了网易的移动端布局之后得出的结论。　　下图是网易在分辨率为320*680，375*680，414*680，500*680时，html的font-size尺寸　　　　　　它是根据什么计算的，这就跟设计稿有关了，拿网易来说，它的设计稿应该是基于iphone4或者iphone5来的，所以它的设计稿竖直放时的横向分辨率为640px，为了计算方便，取一个100px的font-size为参照，那么body元素的宽度就可以设置为width: 6.4rem，于是html的font-size=deviceWidth / 6.4。这个deviceWidth就是viewport设置中的那个deviceWidth。根据这个计算规则，可得出本部分开始的四张截图中html的font-size大小如下： deviceWidth = 320，font-size = 320 / 6.4 =

CSS--font字体

阅读更多关于 CSS--font字体

CSS字体样式属性 font-size:字号大小 font-size属性用于设置字号，该属性的值可以使用相对长度单位，也可以使用绝对长度单位。其中，相对长度单位比较常用，推荐使用像素单位px，绝对长度单位使用较少。具体如下： font-family:字体 font-family属性用于设置字体。网页中常用的字体有宋体、微软雅黑、黑体等，例如将网页中所有段落文本的字体设置为微软雅黑，可以使用如下CSS样式代码： p { font-family : "微软雅黑" ; } 可以同时指定多个字体，中间以逗号隔开，表示如果浏览器不支持第一个字体，则会尝试下一个，直到找到合适的字体。常用技巧： 1. 现在网页中普遍使用14px+。 2. 尽量使用偶数的数字字号。ie6等老式浏览器支持奇数会有bug。 3. 各种字体之间必须使用英文状态下的逗号隔开。 4. 中文字体需要加英文状态下的引号，英文字体一般不需要加引号。当需要设置英文字体时，英文字体名必须位于中文字体名之前。 5. 如果字体名中包含空格、#、$等符号，则该字体必须加英文状态下的单引号或双引号，例如font-family: "Times New Roman";。 6. 尽量使用系统默认字体，保证在任何用户的浏览器中都能正确显示。 CSS Unicode字体在 CSS 中设置字体名称，直接写中文是可以的。但是在文件编码（GB2312

2 - 前端基础--CSS 选择器

阅读更多关于 2 - 前端基础--CSS 选择器

引入css方式（重点掌握） 1、行内样式 <div> <p style="color: green">我是一个段落</p></div> 在标签内添加一个style属性，属性值为要设置的样式：样式的值。 2、内接样式 <style type="text/css"> /*写我们的css代码*/ span{ color: yellow; }</style> 3、外接样式 3.1 链接式 <link rel="stylesheet" href="./index.css"> 3.1 导入式 <style type="text/css"> @import url('./index.css');</style> css的选择器： 1.基本选择器 2.高级选择器 CSS选择器基本选择器基本选择器包括：标签选择器 id选择器类选择器 1.标签选择器标签选择器可以选中所有的标签元素，比如div，ul，li ，p等等，不管标签藏的多深，都能选中，选中的是所有的，而不是某一个，所以说 "共性" 而不是 ”特性“ body{ color:gray; font-size: 12px;}/*标签选择器*/p{ color: red;font-size: 20px;}span{ color: yellow;} 2.id选择器 # 选中id 同一个页面中id不能重复。任何的标签都可以设置id

【前端基础】- CSS 1-CSS选择器

阅读更多关于【前端基础】- CSS 1-CSS选择器

引入css方式（重点掌握） 1、行内样式 <div> <p style="color: green">我是一个段落</p> </div> 在标签内添加一个style属性，属性值为要设置的样式：样式的值。 2、内接样式 <style type="text/css"> /*写我们的css代码*/ span{ color: yellow; } </style> 3、外接样式 3.1 链接式 <link rel="stylesheet" href="./index.css"> 3.1 导入式 <style type="text/css"> @import url('./index.css'); </style> css的选择器： 1.基本选择器 2.高级选择器 CSS选择器基本选择器基本选择器包括：标签选择器 id选择器类选择器 1.标签选择器标签选择器可以选中所有的标签元素，比如div，ul，li ，p等等，不管标签藏的多深，都能选中，选中的是所有的，而不是某一个，所以说 "共性" 而不是 ”特性“ body{ color:gray; font-size: 12px; } /*标签选择器*/ p{ color: red; font-size: 20px; } span{ color: yellow; } 2.id选择器 # 选中id 同一个页面中id不能重复。

4. int()和float()从字符串中取值误区

阅读更多关于 4. int()和float()从字符串中取值误区

<!DOCTYPE html> Untitled3 */ /*--> */ */ /*--> */ */ /*--> */ <script src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.5/latest.js?config=TeX-AMS_HTML"></script>  <script type="text/x-mathjax-config"> MathJax.Hub.Config({ tex2jax: { inlineMath: [ ['$','$'], ["\$","\$"] ], displayMath: [ ['$$','$$'], ["\\[","\\]"] ], processEscapes: true, processEnvironments: true }, // Center justify equations in code and markdown cells. Elsewhere // we use CSS to left justify single line equations in code cells. displayAlign: 'center', "HTML-CSS": { styles: {'.MathJax

3. 成员运算符in 误区

阅读更多关于 3. 成员运算符in 误区

<!DOCTYPE html> Untitled1 */ /*--> */ */ /*--> */ */ /*--> */ <script src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.5/latest.js?config=TeX-AMS_HTML"></script>  <script type="text/x-mathjax-config"> MathJax.Hub.Config({ tex2jax: { inlineMath: [ ['$','$'], ["\$","\$"] ], displayMath: [ ['$$','$$'], ["\\[","\\]"] ], processEscapes: true, processEnvironments: true }, // Center justify equations in code and markdown cells. Elsewhere // we use CSS to left justify single line equations in code cells. displayAlign: 'center', "HTML-CSS": { styles: {'.MathJax

寒假第三天

阅读更多关于寒假第三天

标题标签使用hn进行变大，变小 <%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="utf-8"%> <!DOCTYPE html> <html> <head> <meta charset="ISO-8859-1"> <title>Insert title here</title> </head> <body> <h1>公司简介</h1> <h2>公司简介</h2> <h3>公司简介</h3> </body> </html> 运行结果如下特点：加粗，加黑注释： 2，水平线标签：<hr /> <hr size="5"/>属性：没有阴影取值 <hr noshade="noshade" /> 表示纯色 3，表示段落段落标签： <p></p> 4,字体标签 <font></font> <font color="red">你还没有添加任何分类</font> 颜色变为红色 <font size="7">你还没有添加任何分类 </font> 改变大小 <%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="utf-8"%> <!DOCTYPE html> <html>

解决css引用字体跨域问题

阅读更多关于解决css引用字体跨域问题

解决css引用字体跨域问题公司的vue项目用的是外部的免费cdn库，导致放假期间cdn挂了所有网页都打不开了，所以把外部的js,css都引入到了自己的cdn服务器，但有些UI库的css是引入本地的字体图标，导致引入本地css后产生了跨域问题核心 @font - face { font - family : my - icon ; src : url ( . . / font / iconfont . eot ? v = 240 ) ; src : url ( . . / font / iconfont . eot ? v = 240 #iefix ) format ( 'embedded-opentype' ) , url ( . . / font / iconfont . svg ? v = 240 #iconfont ) format ( 'svg' ) , url ( . . / font / iconfont . woff ? v = 240 ) format ( 'woff' ) , url ( . . / font / iconfont . ttf ? v = 240 ) format ( 'truetype' ) } 解决方案字体转base64编码网址： https://transfonter.org/ 将图标库转成baes64 使用

订阅 font