码迷,mamicode.com
首页 > 其他好文 > 详细

每日思考(2020/07/10)

时间:2020-07-11 09:37:04      阅读:83      评论:0      收藏:0      [点我收藏+]

标签:适应   浏览器   设置   体验   conf   原因   标准   nod   link   

题目概览

  • favicon.ico有什么作用?
  • 编写css中你有遇到过哪些浏览器兼容性的问题?
  • 移动端点击事件为什么会有延迟?有哪些方法可以解决?
  • 对RESTful的理解

题目解答

favicon.ico有什么作用?

  • 作用:favicon 中文译名是收藏夹图标,不仅是网站的头像,也是其可以让浏览器的收藏夹中除了显示相应的标题外,还以图标的方式区分不同的网站。 FF 浏览器还支持动态的 favicon,让你的网站更有个性。favicon 在一定程度上减轻服务器的流量带宽占用,一般为了提高网站的可用性,我们都会为自己的网站创建一个自定义的404错误文件,在这种情况下,如果网站没有相应的favicon.ico文件,每当有用户收藏网站/网页时, Web服务器都会调用这个自定义的404文件,并在网站的错误日志中记录。这显然是应该予以避免的。

  • 引用:

    <link rel="shortcut icon" type="image/x-icon" href="/favicon.ico">
    <link rel="shortcut icon"  href="/favicon.ico">
    
  • 尺寸:16x16 32x32

  • webpack 打包 :

    //html-webpack-plugins 来处理 html的话,这个插件已经提供了 favicon
    const htmlPlugin = new HtmlWebpackPlugin({
        favicon: path.resolve(publicDir, ‘./imgs/favicon.ico‘)
    });
    pluginsConfig.push(htmlPlugin);
    

编写css中你有遇到过哪些浏览器兼容性的问题?

  • 概念:是指不同的浏览器对同一段代码有不同的解析,造成页面显示效果不统一的情况;而造成浏览器兼容问题的根本原因,是浏览器的内核不同导致的

  • 解决思路和方案:

    • 使用CSS Hack解决兼容性问题

      • 浏览器在读取CSS代码的时候可能会遇到一些无法识别的代码,造成这种现象的原因通常有两种

        • 代码本身有问题,如: bg:red ,bg并不是一个有效的css属性

        • 代码没问题,但浏览器的内核不能识别,如: box-sizing:border-box ,这句代码本身没有问题,但由于使用的是CSS3的属性box-sizing ,会造成在一些低版本内核的浏览器中无法识别。 总之,当浏览器遇到这些无法识别的代码时,浏览器不会中止程序的执行,它会立即跳过这些无法识别的代码,就当作没看见一样,继续执行后面的代码

          .main{
          	color1 : red; /*这句代码无法被浏览器识别,浏览器就当这句代码不存在*/
          	color: green;
          }
          
        • 浏览器方面,除了拥有这种特殊的错误处理方式之外,不同的浏览器内核,以及浏览器内核的不同版本,它们同时拥有自己独特的CSS属性,这些属性在CSS标准之外。造成这种现象的原因是一些历史遗留问题。比如,webkit内核的浏览器能够识别-webkit-box-sizing:border-box; ,在没有box-sizing的年代,它就是通过-webkit-box-sizing 来设置盒子宽高影响范围的,但其他内核的浏览器是无法识别该属性的。

    • 浏览器CSS样式初始化:由于每个浏览器的css默认样式不尽相同,所以最简单有效的方式就是对其进行初始化,相信很多朋友都写过这样的代码,在所有CSS开始前,先把marin和padding都设为0,以防不同浏览器的显示效果不一样

      *{
       margin: 0;
       padding: 0;
      }
      
    • 渐近增强和优雅降级

      • 优雅降级以新版本浏览器为目标,从现状开始,并面向低版本浏览器,逐渐减少用户体验的供给。优先书写新标准中的属性,以适应新版本浏览器,然后再补充旧版本浏览器中的书写方式

        .transition{
        	transition: all .5s;
        	-o-transition: all .5s;
        	-moz-transition: all .5s;
        	-webkit-transition: all .5s;
        }
        
      • 渐进增强以旧版本浏览器为目标,从一个非常基础的,能够起作用的版本开始,并不断扩充,以适应新版本浏览器的需要。优先书写浏览器特有的属性,以适应旧版本浏览器,然后再补充新标准中的属性

        .transition {
        	-webkit-transition: all .5s;
        	-moz-transition: all .5s;
        	-o-transition: all .5s;
        	transition: all .5s;
        }
        
    • 使用现代化的CSS插件解决兼容问题

移动端点击事件为什么会有延迟?有哪些方法可以解决?

  • 原因:等待300ms看用户是点击还是双击缩放
  • 解决办法:
    • 禁止缩放、设置默认视口宽度为设备宽度、
    • 设置css touch-action:none、
    • fastclick.js:主要的原理就是,创建了一个div,并且执行了这个div的点击事件并且取消默认事件,再隐藏这个div

对RESTful的理解

每日思考(2020/07/10)

标签:适应   浏览器   设置   体验   conf   原因   标准   nod   link   

原文地址:https://www.cnblogs.com/EricZLin/p/13282162.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!