font-size

CSS之①常用基本文字属性

由 邮差的信 提交于 2020-02-06 05:46:04
CSS之①常用基本文字属性 QQ:3020889729 小蔡 CSS的作用·个人总结（粗鄙请谅解） 正文·文字属性 常用的文字属性概括 常用文字属性的属性值介绍(使用属性赋值时要先使用一个':'号，外加一个空格，比如：color: red;) font-size的属性值 font-style的属性值 font-weight的属性值 font-family的属性值 font复合属性的使用 QQ:3020889729 小蔡 CSS的作用·个人总结（粗鄙请谅解） 个人感觉，css是对html对网页显示的加工——就好比，一间房间需要装修一样。我们的网页内容也需要修饰之后才更适合对外。而css恰恰可以完善，单纯使用html来排版样式的繁琐和困难。 作用一：本身脱于html，又与html息息相关，完善html的展示效果。 作用二：因为css样式表中含有众多的选择器，每一个选择器可以用在不同的地方，使得html的内容可以呈现更多元的效果——最主要是，让html文档显得更清晰。 （ps：才入手，可能有很多用处，只是呢在下还很菜~） 正文·文字属性 常用的文字属性概括 常用文字属性包括： 设置字体大小：font-size 设置字体样式：font-style 设置字体粗细：font-weight 设置字体：font-family 以及字体设置的复合属性：font 常用文字属性的属性值介绍

Hexo

由 亡梦爱人 提交于 2020-02-05 13:26:20
一.CSS3的基本选择器 1.标签选择器 一个HTML页面由很多的标签组成，如 <h1> ~ <h6> , <p> , <img/> 等，CSS标签选择器就是用来声明这些标签。每种HTML标签的名称都可以作为相应的标签选择器的名称，例如，h3选择器用于声明页面中页面所有 <h3> 标签的样式风格。 语法：p{ font-size:16px;} 标注：p为HTML标签中的标签选择器，{}括号里面的是声明，属性：值 标签选择器是网页样式中经常用到的，通常用于设置页面中的标签样式。 代码示例 123456789101112 <style type="text/css"> h3{ color:#090; } p{ font-size:16px; color:red; }<body> <h3>北京欢迎你</h3> <p>北京欢迎你，有梦想谁都了不起</p></body> 2.类选择器 在标签选择器中看到，标签选择器一旦声明，那么页面中所有的该标签，都会相应的发生变化。例如，当声明了 <p> 都为红色时，页面中所有的 <p> 标签都将显示为红色，如果希望其中的某个 <p> 标签不是红色，而是绿色，仅靠标签选择器是不够的，还需类（class）选择器。 类选择器的名称可以有用户自定义，必须符合CSS规范，属性和值跟标签选择器一样。 语法 .class{ font-size:16px;} 标注

百度

由 丶灬走出姿态 提交于 2020-02-05 12:22:33
效果图 HTML代码 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>百度一下,你就知道</title> <link rel="stylesheet" href="css/nav.css" /> <link rel="stylesheet" href="css/center.css" /> <link rel="stylesheet" href="css/img.css" /> <link rel="stylesheet" href="css/bot.css" /> <link rel="stylesheet" href="img/font_1f632fq0apk/iconfont.css" /> <link rel="stylesheet" href="img/font_knm5rl5g2jk/iconfont.css" /> <link rel="icon" href="img/baidu.ico" type="image/x-icon" /> <style> * { margin: 0; padding: 0; } </style> </head> <body> <div class="nav"> <ul> <li> <a href="#">新闻</a> </li> <li> <a href="#"

手淘适配-flexible

由 别来无恙 提交于 2020-02-04 14:04:48
目标 拿一个双11的Mobile页面来做案例，比如你实现一个类似下图的一个H5页面： 目标很清晰，就是做一个这样的H5页面。 痛点 虽然H5的页面与PC的Web页面相比简单了不少，但让我们头痛的事情是要想尽办法让页面能适配众多不同的终端设备。看看下图你就会知道，这是多么痛苦的一件事情： 再来看看手淘H5要适配的终端设备数据： 看到这些数据，是否死的心都有了，或者说为此捏了一把汗出来。 手淘团队适配协作模式 早期移动端开发，对于终端设备适配问题只属于Android系列，只不过很多设计师常常忽略Android适配问题，只出一套iOS平台设计稿。但随着iPhone6，iPhone6+的出现，从此终端适配问题不再是Android系列了，也从这个时候让移动端适配全面进入到“杂屏”时代。 上图来自于 paintcodeapp.com 为了应对这多么的终端设备，设计师和前端开发之间又应该采用什么协作模式？或许大家对此也非常感兴趣。 而整个手淘设计师和前端开发的适配协作基本思路是： 选择一种尺寸作为设计和开发基准 定义一套适配规则，自动适配剩下的两种尺寸(其实不仅这两种，你懂的) 特殊适配效果给出设计效果 还是上一张图吧，因为一图胜过千言万语： 在此也不做更多的阐述。在手淘的设计师和前端开发协作过程中：手淘设计师常选择iPhone6作为基准设计尺寸，交付给前端的设计尺寸是按 750px *

使用Flexible 实现手淘H5 页面的终端适配学习

由 南楼画角 提交于 2020-02-04 13:12:31
Amfe阿里无线前端团队双11技术连载之际,一个实战案例来展示多终端适配. Device metrics 1.0 mdpi 2.0 xhdpi 3.0xxhdpi(iphone 6 plus) 手淘h5要试配的终端设备数据 只出一套IOS平台设计稿， 但随着iphone 6 iphone6+的出现，从此终端tdsgukjg已不再是ANdroid系列了，ipo iphone 6 750*1134 iphone 6 plus 414*736 设计师和前端开发之间又应彩什么协作模式？ 选择一种尺寸作为设计和开发基准 定义一套适配规则，自动适配剩下的两种尺寸（你懂的） 特殊配适效果给出设计效果。 手淘设计师常选择iphone6 作为基准设计 交互给前端的是750*1334 自动适配到其它规则 前端开发完成终端适配方案 flexible 方案 视窗viewport viewport 严格等于浏览器的窗口，有点复杂 移动端的viewport太窄， 为了能更好为css布避服务， 两个view port viewportvisualviewport和布局的 viewportlayoutviewport 虚拟， 布局 这两个概念 ppk 写的相关教程 物理像素 设备像素 物理部件颜色和亮度，微小距离 设备独立像素（density-independent pixel） 密度无关像素， 一个点，

屏幕适配

由 |▌冷眼眸甩不掉的悲伤 提交于 2020-02-04 11:49:24
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这个单位，首页以内依旧是和以前一样各种混乱，有定死宽度的页面，也有那种流式布局的页面。 我们现在在切页面布局的使用常用的单位是px，这是一个绝对单位，web app的屏幕适配有很多中做法，例如：流式布局、限死宽度，还有就是通过 响应式 来做，但是这些方案都不是最佳的解决方法。

移动端自适应方式

由 蓝咒 提交于 2020-02-04 11:47:22
一、第一种方式是比较简单的，开发速度也比较快。主要利用-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

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

由 独自空忆成欢 提交于 2020-02-04 11:46:48
方案： 固定一个某些宽度，使用一个模式，加上少许的媒体查询方案 使用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（网易的移动端页面布局做法）

由 瘦欲@ 提交于 2020-02-04 11:41:16
　　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字体

由 淺唱寂寞╮ 提交于 2020-02-04 04:02:05
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
订阅 font-size