前端面试题第八天 一、HTML 部分 1.1 viewport常见设置 定义:视口(viewport)是用户网页的可视区域,也可称之为视区。 默认不设置 viewport 可视区窗口的宽度在移动端的时候是980; meta标签的设置 设置视口viewport <meta name="viewport" content="width=device-width,user-scal
1.我们先将以下命令安装到项目中 npm i postcss-px-to-viewport -D 2.在项目根目录下添加.postcssrc.js文件 3.添加如下配置: module.exports = { plugins: { autoprefixer: {}, // 用来给不同的浏览器自动添加相应前缀,如-webkit-,-moz-等等 "postcss-px-to-viewport
视口单位(Viewport units) 什么是视口? 在PC端,视口指的是在PC端,指的是浏览器的可视区域; 而在移动端,它涉及3个视口:Layout Viewport(布局视口),Visual Viewport(视觉视口),Ideal Viewport(理想视口)。 视口单位中的“视口”,PC端指的是浏览器的可视区域;移动端指的就是Viewport中的Layout Vie
一、数据分析 1、一般的数据分析过程 数据采集、数据存储、数据分析、数据挖掘、数据可视化、进行决策 (1)数据存储:存储到数据仓库(输入到计算机中存储为文件格式)。 (2)数据挖掘:从大量的数据通过算法搜索隐藏于其中信息的过程,并不清楚能够挖掘出什么,即不能
1.前言 前面演示的例子都是在一个窗口中显示一个图像。但是在常见的图像处理软件中,经常会遇到在一个窗口中显示多个图像,这就会用到图像融合技术。图像融合利用图像的alpha通道和不透明度来实现。VTK中vtkImageBlend实现图像的融合。 vtkImageBlend可以接收多个图像输入,输出为融合
Godot viewpoint(视口) viewport Godot viewpoint(视口)2D分屏布局viewport添加摄像机添加代码添加小地图 2D分屏 布局viewport viewport是显示游戏画面的地方。 将viewport视为投屏的屏幕,将摄像机摄影的画面投上屏幕显示。 一个viewport可以有多个摄像机,但只能设置一个
vw适配 1.browserslistrc文件 删除 not dead 2. 安装依赖 cnpm i -S postcss-px-to-viewport 3.根目录下创建 postcss.config.js 文件 配置如下: module.exports = { "plugins": { "postcss-px-to-viewport": { "unitToConvert": "px"
为什么用viewport适配 手机厂商在生产手机的时候大部分手机默认页面宽度为980px 手机实际视口宽度都要小于980px,如:iphone6为375px 开发需求:需要将980的页面完全显示在手机屏幕上且没有滚动条 实现方法 <meta name = "viewport" content="width=device-width,initial-scale=1.0">
概念 1.尺寸相关概念 设备像素 pt(物理像素)分辨率 ,绝对像素 pt:像素点 css像素 px(设备独立像素、逻辑像素), 注意:在PC中默认1px = 1pt , 在W3C标准中 ,px是一个视角单位 2.屏幕尺寸 英寸(inc):长度单位 1inc = 2.54cm 3.像素密度(PPI) ppi = 斜边长/
window.devicePixelRatio = 物理像素/理论像素; 目前window10系统可以通过 设置-显示 修改此比值; 第一个window.screen是dpi为100%时的数据,第二个的dpi为150%;可见js中获取到的px都是 理论像素; 可参考文章: 移动前端开发之viewport,devicePixelRatio的深入理解 name="viewport" wi
一、移动端1px变粗的原因 为什么移动端css里面写了1px, 实际看起来比1px粗,其实原因很好理解:这个px的含义是不一样的。移动端html的header总会有一句 <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"> 这
为什么需要深入学习CSS溢出机制? 在实际开发的过程中,内容溢出是经常见到的。如果不深入了解这个机制,你经常会碰到这样的问题:为什么这个元素没有受到祖先元素的overflow:hidden的影响?这里出现的滚动条是哪个元素的?如何消除这个滚动条?如何在指定的元素上增加滚动功能?在这篇文章,我们
前言 本篇文章修改、整理自我以前写的一篇文章。 在阅读这篇文章之前,你需要了解设备像素、逻辑像素(设备独立像素)和CSS像素的区别,见我的前一篇文章理解设备像素、设备独立像素和css像素。 在经典文章A tale of two viewports中,作者定义了两种视口: layout viewport 包含了页面中的
前言 2018年最后的法定假期都已经结束了,我相信大部分正在进行或曾经进行过移动端页面开发的同学都或多或少的了解过使用rem进行移动端页面适配的方案以及使用vw的方案,(没了解过的同学可以参见大漠老师的这两篇文章 使用Flexible实现手淘H5页面的终端适配和再聊移动端页面的适配)
基础信息 姓名: 性质:深圳外包、成都外包、项目外包人力 面试时长:分钟 面试结论:一面面试x通过 可预约面试时间段: 面试评价 说明:面试通过才写面试结论。 基础面试题 说明:只保留问及或新增问题,并在后面评分。内勤一面综合基础问题数>=12个,且面试时间>=40分钟;外包一面综合
写在前面 在移动网民规模不断扩大的今天,手机、平板等移动设备俨然已成了网民主要上网终端。迎着这个势头,我们这些前端汪们也接下了不少的移动web页面开发需求。当在感叹终于不需要兼容pc端低端浏览器时却面临了移动多终端屏幕适配这一问题。 本人经验尚浅,在大牛们得出的数种适配
前端是个很大的概念,我的理解是用户能够看到,直接接触到的层面都算是前端,比如IOS客户端界面,安卓客户端界面,网页界面,甚至PC/MAC 桌面端软件界面;现在最常见的说法一般是指Web前端,也就是针对于网页端开发的工作。 Web App就是以浏览器作为客户端的软件。比如你要写文档,一般会打开Offic
前言 这次想聊聊移动开发相关的事。是的,你没有看错,一句话就可以开始你的移动前端开发。 你心里一定在想,什么话这么酷,能够瞬间带入到移动前端开发的世界。 但其实它一点也不新奇,不复杂。 viewport简介 没错,就是viewport特性,一个移动专属的Meta值,用于定义视口的各种行为。 该特性最
应用占用全屏区域,而系统状态栏需要预留出系统状态栏高度。 HBuilder创建的应用默认不使用沉浸式状态栏样式,需要进行如下配置开启:打开应用的manifest.json文件,切换到代码视图,在plus -> statusbar 下添加immersed节点并设置值为true。 "plus": { "statusbar": {
一般我们做vue移动端项目使用的长度单位是rem、em,需要根据设计稿宽度进行计算,而这个插件可以配置相应属性直接按照原始设计稿长度进行构建,不需要繁琐的单位换算。 安装: npm install postcss-px-to-viewport --save 安装完成后在vue根目录下找到".postcssrc.js"文件,添加下面的配
四、移动适配 文章目录四、移动适配移动端适配viewpoint视口媒体查询参考文章 移动端适配 移动端Web页面,即常说的H5页面、手机页面、webview页面; 手机设备屏幕尺寸不一,做移动端的Web页面,需要考虑安卓/IOS的各种尺寸设备上的兼容,针对移动端设备的页面,设计与前端实现怎样做能
https://juejin.im/post/5b94d8965188255c5a0cdc02#heading-0 <!DOCTYPE html> H5标准声明,使用 HTML5 doctype,不区分大小写 <head lang=”en”> 标准的 lang 属性写法 <meta charset=’utf-8′> 声明文档使用的字符编码 <meta http-equiv=”X-UA-Compatible” content=
引子 使用 position transform 实现从右边滑出的 h5 浮层效果,但在手机浏览器上左右滑动时,页面产生了左右滚动条,浮层也出来了。这是问题页面,移动端访问如下: 这个现象不应该出现,问题好解决,但为什么会这样?想了一下,好像知道相关点,但又讲不清,所以在此梳理一下。 Origin My GitHub
Viewport 是 HTML5 针对移动端开发新增的一个 meta 属性, 它的作用是为同一网页在不同设备的呈现,提供响应式解决方案。这篇文章尝试通过循序渐进的方式,逐层探索 Viewport 的设计原理,希望能给读者带来更加清晰、更加全面的技术认知。 一、引言 在PC时代,我们用 css 设置 1px 边框,显
有关于移动端的适配布局一直以来都是众说纷纭,对应的解决方案也是有很多种。在《使用Flexible实现手淘H5页面的终端适配》提出了Flexible的布局方案,随着viewport单位越来越受到众多浏览器的支持,因此在《再聊移动端页面的适配》一文中提出了vw来做移动端的适配问题。到目前为止不管