美文网首页
web前端面试题@十八(移动端1px问题,为什么会有?如何解决?

web前端面试题@十八(移动端1px问题,为什么会有?如何解决?

作者: 王芃皓 | 来源:发表于2019-12-05 23:26 被阅读0次

一、移动端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方法要求开发者明确地确认对象为某特定类型

相关文章

  • web前端面试题@十八(移动端1px问题,为什么会有?如何解决?

    一、移动端1px问题,为什么会有?如何解决? 为什么移动端会产生1px问题呢? 因为UI设计师在最初设计的时候使用...

  • vue面试题第十三天

    @1移动端1px问题,为什么会有?如何解决? 在开发中,为什么移动端CSS里面写了1px,实际上看起来比1px粗;...

  • 面试题

    @1: 移动端1px问题,为什么会有?如何解决? 物理像素:移动设备出厂时,不同设备自带的不同像素,也称硬件像素...

  • 前端常见面试题二十

    目录:1、什么是事件代理且描述事件代理的原理及为什么要用事件代理?2、移动端1px问题,为什么会有?如何解决?3、...

  • 第十三天

    移动端1px问题,为什么会有?如何解决? 因为在移动端,由于屏幕分辨率的不同,现在分为一倍屏、二倍屏、三倍屏。在不...

  • 1px

    CSS中1px分割线处理移动web开发之像素和DPR详解7种方法解决移动端Retina屏幕1px边框问题IOS基础...

  • 22天面试题

    1.什么是事件代理且描述事件代理的原理及为什么要用事件代理? 2.移动端1px问题,为什么会有?如何解决? 3.解...

  • 前后端--外部面试题

    移动端1px解决方案[https://juejin.cn/post/6844903877947424782]Web...

  • 移动端开发

    # 移动端开发 ### 1. 1px问题如何解决 #### ①伪类 + transform(比较完美) > 原理是...

  • 文集

    若web前端到达了瓶颈,如何冲出重围? 移动端汇总 腾讯移动web知识库移动前端开发指南移动端上遇到的各种坑移动端...

网友评论

      本文标题:web前端面试题@十八(移动端1px问题,为什么会有?如何解决?

      本文链接:https://www.haomeiwen.com/subject/qmojgctx.html