web前端面试题@十八(移动端1px问题,为什么会有?如何解决?typeof和instanceof相同点与不同点?)

一、移动端1px问题,为什么会有?如何解决?

为什么移动端会产生1px问题呢?

        因为UI设计师在最初设计的时候使用的尺寸是按照640x960设计的,前端写的时候是按照320x480写的,写1px(css),浏览器自动变成2px(真实像素)。

那么前端工程师为什么不能直接写0.5px(css)呢?

        因为在老版本的系统里写0.5px(css)的话,会被浏览器解读为0px(css),就没有边框了。不过在新版的系统里,已经开始逐渐支持0.5px(css)这种写法。所以如果设计师在大图上设计了一个1px(真实像素)的线的话,前端工程师直接除以2,写0.5px(css)就好了。

具体解决方案有哪些?

a.小数值

div { border: 1px solid #000;}

@media (-webkit-min-device-pixel-ratio: 2) { div { border: .5px solid #000; }}

b.border-image(将图片规定为包围 div 元素的边框)

      {

    border-width: 1px 0px;

    -webkit-border-image: url(border.png) 2 0 stretch;

    border-image: url(border.png) 2 0 stretch;

}

c.background-img渐变

{

background:

 linear-gradient(180deg, black, black 50%, transparent 50%) top left / 100% 1px no-repeat,linear-gradient(90deg, black, black 50%, transparent 50%) top right / 1px 100% no-repeat,        linear-gradient(0, black, black 50%, transparent 50%) bottom right / 100% 1px no-repeat,        linear-gradient(-90deg, black, black 50%, transparent 50%) bottom left / 1px 100% no-repeat; 

}

d.box-shadow(向元素添加阴影)

{        

    -webkit-box-shadow:0 1px 1px -1px rgba(255, 0, 0, 0.5);

    box-shadow:0 1px 1px -1px rgba(255, 0, 0, 0.5);

}

e.设置 Viewport

<meta name="viewport" content="initial-scale=0.5, maximum-scale=0.5, minimum-scale=0.5, user-scalable=no"> 

f.transform:scale(0.5)(旋转元素)

div { height: 1px; background: #000; transform: scaleY(0.5); transform-origin: 0 0;}

二、typeof和instanceof相同点与不同点

在javascript中,判断一个变量的类型可以用typeof

(1)数字类型、typeof返回的值是number。比如说:typeof(1),返回值是number

(2)字符串类型,typeof返回的值是string。比如typeof(“123”返回值时string)

(3)布尔类型,typeof返回的值是boolean。比如typeof(true)返回值时boolean

(4)对象、数组、null返回的值是object。比如typeof(window),typeof(document),typeof(null)返回的值都是object

(5)函数类型,返回的值是function。比如:typeof(eval),typeof(Date)返回的值都是function。

(6)不存在的变量、函数或者undefined,将返回undefined。比如:typeof(abc)、typeof(undefined)都返回undefined

在javascript中,instanceof用于判断某个对象是否被另一个函数构造。

两者的关系?

使用typeof运算符时采用引用类型存储值会出现一个问题,无论引用的是什么类型的对象,它都返回”object”。

ECMAScript引入了另一个Java运算符instanceof来解决这个问题。

相同点:Instanceof运算符与typeof运算符相似,用于识别正在处理的对象的类型。

不同的是:instanceof方法要求开发者明确地确认对象为某特定类型















在javascript中,判断一个变量的类型可以用typeof

(1)数字类型、typeof返回的值是number。比如说:typeof(1),返回值是number

(2)字符串类型,typeof返回的值是string。比如typeof(“123”返回值时string)

(3)布尔类型,typeof返回的值是boolean。比如typeof(true)返回值时boolean

(4)对象、数组、null返回的值是object。比如typeof(window),typeof(document),typeof(null)返回的值都是object

(5)函数类型,返回的值是function。比如:typeof(eval),typeof(Date)返回的值都是function。

(6)不存在的变量、函数或者undefined,将返回undefined。比如:typeof(abc)、typeof(undefined)都返回undefined


在javascript中,instanceof用于判断某个对象是否被另一个函数构造。


使用typeof运算符时采用引用类型存储值会出现一个问题,无论引用的是什么类型的对象,它都返回”object”。ECMAScript引入了另一个Java运算符instanceof来解决这个问题。Instanceof运算符与typeof运算符相似,用于识别正在处理的对象的类型。与typeof方法不同的是,instanceof方法要求开发者明确地确认对象为某特定类型

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 简述JavaScript起源起源于美国的Netscape公司,原名为LiveScript,后改为JavaScrip...
    3ab670b99521阅读 3,035评论 0 0
  • "use strict";function _classCallCheck(e,t){if(!(e instanc...
    久些阅读 2,053评论 0 2
  • 前端开发面试题 面试题目: 根据你的等级和职位的变化,入门级到专家级,广度和深度都会有所增加。 题目类型: 理论知...
    怡宝丶阅读 2,608评论 0 7
  • HTML 5 HTML5概述 因特网上的信息是以网页的形式展示给用户的,因此网页是网络信息传递的载体。网页文件是用...
    阿啊阿吖丁阅读 4,068评论 0 0
  • 第5章 引用类型(返回首页) 本章内容 使用对象 创建并操作数组 理解基本的JavaScript类型 使用基本类型...
    大学一百阅读 3,270评论 0 4