前端开发遇到的问题

CSS

1、页面平滑滚动

问题：

需要在滚动到顶部的时候有缓慢滚动的动画效果

方案：

scroll-behavior: 规定当用户单击可滚动框中的链接时，是否平滑地（具动画效果）滚动位置，而不是直线跳转

凡是需要滚动的地方都加一句scroll-behavior:smooth 来提升滚动体验！

html, body { scroll-behavior:smooth; }

引申知识点：
scroll-behavior属性值

属性
auto	默认值。允许在滚动框内的元素间直接跳转的“滚动效果”。
smooth	允许在滚动框内的元素间平滑的“滚动效果”
initial	将此属性设置为其默认值。参阅 initial
inherit	从其父元素继承此属性。参阅 inherit

2、绘制三角形

问题：

如何用css写出一个三角形

方案1：

利用边的宽度和transparent透明形成三角形，不需要宽高。

结果：

image.png

image.png

方案2：

利用clip-path进行裁剪。可以做到边框颜色和背景颜色不一致的三角形

结果：

image.png

image.png

引申知识点：

clip-path 属性使用裁剪方式创建元素的可显示区域。（IE是完全不支持，尽量使用webkit内核）

区域内的部分显示，区域外的隐藏。可以指定一些特定形状。

.clip-me {
  clip-path: inset(); // 定义一个 inset 矩形。
  clip-path: circle(); // 定义一个圆形（使用一个半径和一个圆心位置）。
  clip-path: ellipse(); // 定义一个椭圆（使用两个半径和一个圆心位置）。
  clip-path: polygon(); // 定义一个多边形（使用一个 SVG 填充规则和一组顶点）。
}

• inset是矩形的剪切

• circle是圆形的剪切

• ellipse是椭圆的剪切

• polygon是多边形的剪切。

• 在polygon的（）里是我们在平面中定位的点，系统会自动地把这几个点按照顺序连接起来，并剪切。

  
  
  image.png

3、对话气泡框

问题：

如何写出一个背景色和边框色不一致的对话气泡框

方案：

利用上述绘制三角形的方案2完成，inherit就是可以保证和父元素一致

结果：

image.png

HTML

1、视频首图设置

问题：

一个视频未播放时展示的是空白，希望可以展示出第几分钟的画面

方案1：

利用video的poster属性，设置第几分钟画面的图片为视频首图

方案2：

利用video的poster属性，使用OSS视频截帧功能（计费）

引申知识点：

oss对象存储

• OSS内置提供了视频截帧功能，视频需要在oss存储中

• 调用方式：

• 通过传入x-oss-process参数的方式来实现

• url?x-oss-process=video/snapshot,t_10000,m_fast

• 最简单的使用方式：直接在public的object(公共的不加密的)的url后面拼接处理字符串

• 如果对private的object(本地或加密的)调用视频截图，需要使用SDK进行鉴权，接口和OSS图片服务的调用接口一致。

• 目前OSS只支持视频编码为h264的视频文件的处理，视频格式本身没有限制。

• 调用参数

• 使用视频截帧时，按视频截帧截取的图片数量计费。有关计费详情的更多信息，请参见数据处理费用。

• 仅支持对视频编码格式为H264和H265的视频文件进行视频截帧。

• OSS默认不保存视频截帧的图片，视频截帧的图片需手动下载并保存至本地。

• 参数说明

• 操作分类：video

• 操作名称：snapshot

参数	描述	取值范围
t	指定截图时间。	[0,视频时长]单位：ms
w	指定截图宽度，如果指定为0，则自动计算。	[0,视频宽度]单位：像素（px）
h	指定截图高度，如果指定为0，则自动计算；如果w和h都为0，则输出为原视频宽高。	[0,视频高度]单位：像素（px）
m	指定截图模式，不指定则为默认模式，根据时间精确截图。如果指定为fast，则截取该时间点之前的最近的一个关键帧。	枚举值：fast
f	指定输出图片的格式。	枚举值：jpg和png
ar	指定是否根据视频信息自动旋转图片。	枚举值：auto、h和w各枚举值说明如下：* auto：指定在截图生成之后根据视频信息进行自动旋转。* h：指定在截图生成之后根据视频信息强制按高大于宽的模式旋转。* w：指定在截图生成之后根据视频信息强制按宽大于高的模式旋转。

移动端

elementUI

el-select

1. 在ios移动端需要点击两次才能选中

问题：

在移动端用了elementUI的el-select的组件，苹果手机下拉框选项需要点击两次才能选中切换。

方案：

在app.vue里面，（注意是在app.vue里，不是在页面或者组件里！！），加上一段css代码。

.el-scrollbar {
    > .el-scrollbar__bar {
        opacity: 1 !important;
    }
}

html

1、移动端输入框输入放大

问题：

input输入框在移动端输入唤起键盘的时候，页面整体放大

方案：

在meta中加入maximum-scale=1.0，表示屏幕最大可以到1

引申知识点：

meta标签 的viewport申明

width	网页的布局layout宽度，控制 viewport 的大小，可以指定的一个值(默认单位px)或者特殊的值：width=960, initial-scale=0.33（960是页面layout的宽度,这里设width意思是将其它缩小到大约1/3，这样正好可以在320像素的手机设备上看到整个网页）width=device-width (设备的宽度,通用写法)
height	和width用法相同，指定高度
target-densitydpi	一个屏幕像素密度是由屏幕分辨率决定的，通常定义为每英寸点的数量（dpi）。属性取值范围：device-dpi: 使用设备原本的 dpi 作为目标 dp。 不会发生默认缩放。 high-dpi: 使用hdpi 作为目标 dpi。 中等像素密度和低像素密度设备相应缩小。 medium-dpi: 使用mdpi作为目标 dpi。 高像素密度设备相应放大， 像素密度设备相应缩小。 这是默认的target density. low-dpi: 使用mdpi作为目标 dpi。中等像素密度和高像素密度设备相应放大。 – 指定一个具体的dpi 值作为target dpi. 这个值的范围必须在70–400之间。为了防止Android Browser和WebView 根据不同屏幕的像素密度对你的页面进行缩放，你可以将viewport的target-densitydpi 设置为 device-dpi。当你这么做了，页面将不会缩放。相反，页面会根据当前屏幕的像素密度进行展示。在这种情形下，你还需要将viewport的width定义为与设备的width匹配，这样你的页面就可以和屏幕相适应。
initial-scale	初始缩放。即页面打开时默认的初始缩放程度。这是一个浮点值，是页面大小的一个乘数。例如，如果你设置初始缩放为“1.0”，web页面在展现的时候就会以target density分辨率的1:1来展现。如果你设置为“2.0”，那么这个页面就会放大为2倍。
maximum-scale	最大缩放。即允许的最大缩放程度。这也是一个浮点值，用以指出页面大小与屏幕大小相比的最大乘数。例如，如果你将这个值设置为“2.0”，那么这个页面与target size相比，最多能放大2倍。
minimum-scale	最小缩放，用法同maximum-scale相同
user-scalable	用户调整缩放。即用户是否能改变页面缩放程度。如果设置为yes则是允许用户对其进行改变，反之为no。默认值是yes。如果你将其设置为no，那么minimum-scale 和 maximum-scale都将被忽略，因为根本不可能缩放。

注意：所有的缩放值都必须在0.01–10的范围之内。