记录－交流－Web开发知识分享
大家都知道，在不同操作系统、不同游览器里面默认显示的字体是不一样的，并且相同字体在不同操作系统里面渲染的效果也不尽相同，那么如何设置字体显示效果会比较好呢？下面我们逐步的分析一下：…
body {
font-family: -apple-system, BlinkMacSystemFont, "PingFang SC","Helvetica Neue",STHeiti,"Microsoft Yahei",Tahoma,Simsun,sans-serif;
}iOS 4.0+ （iOS 9以下系统已经非常少） 使用英文字体 Helvetica Neue，之前的iOS版本降级使用 Helvetica。 中文字体设置为华文黑体STHeiTi。…
注意系统默认字体和浏览器默认字体这个差别。
font: 14px/1.6
/*西文*/-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Ubuntu,Helvetica Neue,Helvetica,Arial,
/*中文*/PingFang SC,Hiragino Sans GB,Microsoft YaHei UI,Microsoft YaHei,Source Han Sans CN,sans-serif;某天（2016.07.12）发现GitHub的字体比原来宽了一些，打开开发者工具一看，字体设置中多了两个奇怪的玩意：
body {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
}
-apple-system，BlinkMacSystemFont是什么东东？根据Webkit博客，-apple-system…
各大主流网站使用的字体
#字体 font: 12px/1.5 tahoma, arial, Microsoft YaHei, Hiragino Sans GB, sans-serif; .简书: font-family: -apple-system, SF UI Text, Arial, PingFang SC, Hiragino Sans GB, Microsoft YaHei, WenQuanYi Micro Hei, sans-serif; .微博: font-family: Arial, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei",…
响应式图像正确设置方法，代码如下：
PC,平板，手机显示良好：
我们用<picture>标签来实现同时适配不同像素密度、不同大小的屏幕。srcset属性用来指定多张图像，适应不同像素密度的屏幕。
通过 媒体查询，来为不同宽度的屏幕设置不同的图片。
其中，1x 2x 3x 代表设备像素比。
通常 pc的设备像素比为1，iphone7为2，iphone7 plubs为3，一些手机为4，还有一些为1.5，3.65等非整数值。
在下面，所有的设备像素比都要用同一张图片，这样才能显示正常。…
该网络共享API是一个似乎已在雷达之下消失了，因为它是在Chrome 61首次推出为Android。从本质上讲，它提供了一种直接从网站或Web应用程序共享内容（例如链接或联系人卡片）时触发设备（或桌面，如果使用Safari）的本机共享对话框的方法。
虽然用户已经可以通过本地方式从网页共享内容，但他们必须在浏览器菜单中找到该选项，即使这样，也无法控制共享内容。通过引入此API，开发人员可以利用用户设备上的本机内容共享功能，将共享功能添加到应用程序或网站中。
与传统方法相比，这种方法具有许多优点：
最近有些朋友问到：为什么我的网页 code 有 class="no-js" ？
<!DOCTYPE html>
<html dir="ltr" lang="en-US" class="no-js">
<head>
<meta charset="utf-8">其实，这个 no-js
网格布局（Grid）是最强大的 CSS 布局方案。
它将网页划分成一个个网格，可以任意组合不同的网格，做出各种各样的布局。以前，只能通过复杂的 CSS 框架达到的效果，现在浏览器内置了。
上图这样的布局，就是 Grid 布局的拿手好戏。
Grid 布局与 Flex 布局有一定的相似性，都可以指定容器内部多个项目的位置。但是，它们也存在重大区别。
Flex 布局是轴线布局，只能指定"项目"针对轴线的位置，可以看作是一维布局。Grid 布局则是将容器划分成"行"和"列"，产生单元格，然后指定"项目所在"的单元格，可以看作是二维布局。Grid 布局远比 Flex 布局强大。…
本文最后更新于 2018年11月20日。推荐姊妹篇：Flexbox 布局完全指南(图解 Flexbox 布局详细教程)
CSS Grid 布局是 CSS 中最强大的布局系统。与 flexbox 的一维布局系统不同，CSS Grid 布局是一个二维布局系统，也就意味着它可以同时处理列和行。通过将 CSS 规则应用于 父元素 (成为 Grid Container 网格容器)和其 子元素（成为 Grid Items 网格项），你就可以轻松使用 Grid(网格) 布局。…
近期评论