前端

响应式网页设计–css设置网页字体大小自适应

响应式网页设计:rem、em设置网页字体大小自适应

「rem」是指根元素(root element,html)的字体大小,好开心的是,从遥远的 IE6 到版本帝 Chrome 他们都约好了,根元素默认的 font-size 都是 16px。这样一个新的单位兼容性如何呢?

IE9+,Firefox、Chrome、Safari、Opera 的主流版本都支持了,我可以放肆的使用 rem 了。

em 的计算是基于父级元素的,在实际使用中给我们的计算带来了很大的不便。所以 rem 的出现解救了我这样不会算术的人,再也不用担心父级元素的 font-size 了,因为它始终是基于根元素(html) 的。

比如默认的 html font-size=16px,那么我想设置12px 的文字就是:12÷16=0.75(rem)

当然,你可以引入 CSS 预处理工具(Sass、LESS 、Stylus等)自动计算 rem 值,这里就不一一举例了。

但是像我这样的懒人或者团队开发中还没有引入 CSS 预处理工具的该肿么办呢?只能搬个计算器啪啪啪了吗?别急,你还可以变通一下。我们改变一下 html 的默认 font-size=10px 不就好计算了嘛!Like this:

html{font-size:62.5%; 
            

深入理解前端性能监控

页面的性能问题是前端开发中一个重要环节,但一直以来我们没有比较好的手段,来检测页面的性能。直到W3C性能小组引入的新的API window.performance,目前IE9以上的浏览器都支持。它是一个浏览器中用于记录页面加载和解析过程中关键时间点的对象。放置在global环境下,通过JavaScript可以访问到它。

使用性能API

你可以通过以下方法来探测和兼容performance:

var performance = window.performance || 
    window.msPerformance || 
    window.webkitPerformance;
if (performance) {
    // 你的代码
}
复制代码

先来了解一下performance的结构

performance.memory是显示此刻内存占用情况,它是一个动态值,其中: usedJSHeapSize表示:JS 对象(包括V8引擎内部对象)占用的内存数 totalJSHeapSize表示:可使用的内存 jsHeapSizeLimit表示:内存大小限制 通常,usedJSHeapSize不能大于totalJSHeapSize,如果大于,有可能出现了内存泄漏。

performance.navigation显示页面的来源信息,其中:

        

网页的图片,js ,css ,视频 都加 http accept-ranges头,以提高性能

网页的图片,js ,css ,视频 都加 http accept-ranges头,以支持多线程加载,断点续传,提高性能!目前各大网站都在使用此方式!

nginx 设置为:

server {
  listen 80;
  server_name p2hp.com;
  location ~ ^/(img/|js/|css/|upload/|font/|fonts/|res/|video) {
    add_header Access-Control-Allow-Origin *;
    add_header Accept-Ranges bytes;
    root /var/www/...;
    access_log off;
    expires 30d;
  }
  ...
}

                    

讲讲PWA

一、背景

文章2017 前端大事件和趋势回顾,2018 何去何从?中提到了2017年前端值得关注的十大事件,其中就提到了PWA。

大家都知道Native app体验确实很好,下载到手机上之后入口也方便。它也有一些缺点:

  • 开发成本高(ios和安卓)
  • 软件上线需要审核
  • 版本更新需要将新版本上传到不同的应用商店
  • 想使用一个app就必须去下载才能使用,即使是偶尔需要使用一下下
                    

毫秒必争,前端网页性能最佳实践

你愿意为打开一个网页等待多长时间?我一秒也不愿意等。但是事实上大多数网站在响应速度方面都让人失望。现在越来越多的人开始建立自己的网站,博客,你的网页响应速度如何呢?在这篇文章中我们来介绍一下提高网页性能的最佳实践,以及相应的问题解决方案,让站长或者即将要成为站长的朋友了解如何去测试和提高网站响应速度,对自己的网站更有信心。

最佳实践

最佳实践我们引用的来自yahoo前端性能团队总结的35条黄金定律。原文猛击这里。下面我们分门别类将每条的关键点总结一下。…

        

移动前端不得不了解的html5 head 头标签

本文主要内容来自一丝的常用的 HTML 头部标签和百度FEX的HTML head 头标签

移动端的工作已经越来越成为前端工作的重要内容,除了平常的项目开发,HTML 头部标签功能,特别是meta标签显得非常重要。

 

DOCTYPE

DOCTYPE(Document Type),该声明位于文档中最前面的位置,处于 html 标签之前,此标签告知浏览器文档使用哪种 HTML 或者 XHTML 规范。

使用 HTML5 doctype,不区分大小写。

<!DOCTYPE html> <!-- 使用 HTML5 doctype,不区分大小写 -->
    

初学web开发需要掌握哪些方面?

初学者如何学习web开发,需要掌握哪些方面?这里我写下我的一些的建议,仅供参考。高手可以飘过。

 第一步:学习HTML和CSS

HTML(超文本标记语言)是网页的核心,学好HTML是成为Web开发人员的基本条件。HTML很容易学习的,但也很容易误用,要学精还得费点功夫。

另外为了规范建议直接学习XHTML.

随着HTML5的发展和普及,了解HTML5也将成为Web开发人员的必修课。

涉及到网页外观时,就需要学习CSS了,它可以帮你把网页做得更美观。

利用HTML和CSS模拟一些你所见过的网站的排版和布局(色彩,图片,文字样式等等)。…