前端开发遇到的问题

2022-06-23  本文已影响0人  摸爬打滚

CSS

1、页面平滑滚动

问题：

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

方案：

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

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

html, body { scroll-behavior:smooth; }

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

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

2、绘制三角形

问题：

如何用css写出一个三角形

方案1：

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

<html xmlns="http://www.w3.org/1999/xhtml">

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>三角形</title>
    <style>
        .triangle {
            width: 0;
            height: 0;
            border-top: 50px solid skyblue;
            border-right: 50px solid transparent;
            border-left: 50px solid transparent;
            transform: rotate(90deg); // 旋转角度，顺时针
        }
    </style>
</head>

<body>
  <div class="triangle"></div>
</body>

</html>

结果：

image.png
image.png

方案2：

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

<html xmlns="http://www.w3.org/1999/xhtml">

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>三角形</title>
    <style>
        .triangle {
            height: 50px;
            width: 50px;
            background-color: red;
            border: 2px solid black;
            clip-path: polygon(0% 0%, 100% 100%, 0% 100%);
            transform: rotate(45deg);
        }
    </style>
</head>

<body>
  <div class="triangle""></div>
</body>

</html>

结果：

image.png image.png

引申知识点：

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

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

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

3、对话气泡框

问题：

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

方案：

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

<html xmlns="http://www.w3.org/1999/xhtml">

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>三角形</title>
    <style>
        .box {
            position: relative;
            background: #fff;
            border: 2px solid black;
            height: 200px;
            width: 400px
        }
        .triangle {
            position: absolute;
            top: calc(50% - 25px);
            left: -26px;
            height: 50px;
            width: 50px;
            background-color: inherit; /* 继承父元素 */
            border: inherit; /* 继承父元素 */
            clip-path: polygon(0% 0%, 100% 100%, 0% 100%);
            transform: rotate(45deg);
        }
    </style>
</head>

<body style="padding: 100px"">
    <div class="box">
        <div class="triangle""></div>
    </div>
</body>

</html>

结果：

image.png

HTML

1、视频首图设置

问题：

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

方案1：

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

<video
   class="video"
   controls
   :autoplay="false"
   poster="../assets/images/landingPage/video_image.png">
   <source src="../assets/images/landingPage/landing_page_video.mp4" type="video/mp4">
</video>

方案2：

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

<video
   class="video"
   controls
   :autoplay="false"
   poster="http://a-image-demo.oss-cn-qingdao.aliyuncs.com/demo.mp4?x-oss-process=video/snapshot,t_10000,m_fast">
   <source src="http://a-image-demo.oss-cn-qingdao.aliyuncs.com/demo.mp4" type="video/mp4">
</video>

引申知识点：

oss对象存储

参数 描述 取值范围
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 name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no">

引申知识点：

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。中等像素密度和高像素密度设备相应放大。 <value> – 指定一个具体的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的范围之内。

上一篇 下一篇

猜你喜欢

热点阅读