css
文章平均质量分 63
Tammyhlf
记录成长每一步
展开
-
我走过最长的路,就是移动端播放视频的套路
一、问题描述在一个风和日丽,且UAT验收的下午,业务来了,她说:这里加个需求吧具体的需求很简单:上传视频、展示视频、可预览、全屏播放。你以为一个video就能搞定?然后遇到了各种各样的兼容性问题二、解决方案(踩坑记录)2.1 移动端不能展示首帧,视频展示空白这还不简单,加个poster搞定,然后开始了获取poster的艰难之路文件服务域是否有提供抽帧的功能?没有…用canvas获取视频的第一帧,需要设置proload为metadata拿到视频的元信息。真机调试发现安卓部分机型不允许视原创 2022-02-21 17:24:11 · 1476 阅读 · 0 评论 -
获取视频首帧
<!DOCTYPE html><html><head><meta charset="UTF-8"><title>capture screen</title></head><body><video id="video" controls="controls" preload="auto" crossOrigin='anonymous'><source src="https://fa原创 2021-06-09 18:12:52 · 241 阅读 · 0 评论 -
vertical-align middle 不生效的几种解决方式,图片居中几种方案
1.在父元素中增加display:table-cell,vertical-align 写在在父元素中 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 .btn{ display:table-cell; width:200px; height:200px; bo...转载 2021-06-02 15:26:19 · 3963 阅读 · 0 评论 -
一文搞定移动端适配!
手机市场日渐丰富的同时,给我们前端开发人员带来的 “网页内容自适应屏幕尺寸进行显示的问题” 也日渐凸显出来,接下来我们就要细说移动端适配的前世今生及方案。为什么要移动端适配?一般情况下设计稿的设计师按照 375 的尺寸设计,然而,在现在移动终端(就是手机)快速更新的时代,每个品牌的手机都有着不同的物理分辨率,这样就会导致,每台设备的逻辑分辨率也不尽相同,此时 375 的设计稿,如果想要还原那基本是不可能了,因为如果一个左右布局,左边如果写死,右边自适应的话,每个设备的右边所展示的内容..转载 2020-05-22 10:01:16 · 362 阅读 · 0 评论 -
实现一个简易的栅格系统
比较简单,但是坑比较多,最好自己动手实现一下。效果图:1200px以上的屏幕下1000px的屏幕800的屏幕(解析写在代码注释里好了)html代码:<div class="row"> <div class="col-lg-1 col-md-6 col-sm-12">.col-md-1</div> <...原创 2019-09-24 20:57:42 · 518 阅读 · 0 评论 -
css元素的默认margin和padding。
在写网页的时候会发现元素之间会有空隙。设置了html,body { padding: 0; margin: 0;}然后发现清除的只是网页最外面容器的空隙,容器内元素的空隙并没有被清除。需要改成以下代码才可以清除所有元素的默认margin和padding。* { padding: 0; margin: 0;}一.h1~h6标签:...原创 2019-04-09 22:47:46 · 1234 阅读 · 0 评论 -
关于清除浮动
浮动:它不是一个正常流布局,浮动元素会从文档的正常流中删除,但是他还是会影响布局,浮动应用于所有的元素,当一个元素浮动时,其他内容会“环绕”该元素。float属性有四个值:left,right分别浮动元素到相应的方向,none(默认),使元素不浮动,inherit将从父级元素获取float值float可用来创建全部网页布局,如导航条的一行排列,左右两栏布局 ,浮动在左右两栏布局中很常见。...原创 2019-04-05 11:09:47 · 197 阅读 · 0 评论 -
js的style属性
首先css样式表有三种样式,一、内联样式在HTML标签用style属性设置,如 :<p style="color:#f90;">这是内联样式</p>二、嵌入样式通过<head>标签内通过<style>标签设置。如:<style type="text/css"> /*这是嵌入样式*/ .stuf...原创 2019-03-16 00:27:47 · 5547 阅读 · 0 评论 -
关于html,body{height:100%}
今天看到一个CSS样式:html,body{height:100%},第一次看到,感觉挺奇怪,为什么html还需要设置height:100%呢,html不就是整个窗口吗?我是这样认为的。然后就把html去掉只剩下body的height:100%,麻烦了,页面内容消失了(页面里只有一个空div通过百分比设置height)。<body><div></div>...转载 2019-03-12 22:58:03 · 597 阅读 · 0 评论 -
em与rem
em子元素字体大小的em是相对于父元素字体大小 width/height/padding/margin元素是相对于当前元素字体的大小。<div> 我是父元素div <p> 我是子元素p <span>我是孙元素span</span> </p></div>...原创 2019-03-04 00:09:42 · 110 阅读 · 0 评论 -
网页自适应总结
1.在头部加上一行viewport 元标签。<meta name="viewport" content="width=device-width, initial-scale=1" />viewport是网页默认的宽度和高度,上面这行代码的意思是,网页宽度默认等于屏幕宽度(width=device-width),原始缩放比例(initial-scale=1)为1.0,即网页初始大...原创 2019-03-03 21:45:23 · 216 阅读 · 0 评论 -
css2与css3各类元素的居中解析
先解析一下下面要讲的元素的含义。块级元素1.总是从新的一行开始 2.高度、宽度都是可控的 3.宽度没有设置时,默认为100% 4.块级元素中可以包含块级元素和行内元素行内元素1.和其他元素都在一行 2.高度、宽度以及内边距都是不可控的 3.宽高就是内容的高度,不可以改变 4.行内元素只能行内元素,不能包含块级元素常见的块状元素有:...原创 2019-02-28 16:06:38 · 168 阅读 · 0 评论 -
animation阶跃函数step详解
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title></title> <style> *{margin: 0; padding: 0;} .div-1{width: 200...转载 2019-02-11 17:49:55 · 655 阅读 · 0 评论 -
vh和vw自适应布局单位
在解决居中问题的时候,看到一种写法:100vh 先要弄懂它是什么就先看看什么是视口 在桌面端,视口指的是在桌面端,指的是浏览器的可视区域;而在移动端,它涉及3个视口:Layout Viewport(布局视口),Visual Viewport(视觉视口),Ideal Viewport(理想视口)。 视口单位中的“视口”,桌面端指的是浏览器的可视区域;移动端指的就是Viewpo...原创 2019-02-09 13:05:15 · 644 阅读 · 0 评论 -
关于z-index的坑
1.z-index要与position搭配起来用,position为absolute,fixed,relative,inherit等,如果在一个未定位的元素上使用z-index是没有效果的。2.同一个父元素下的元素的层叠效果会受父元素的z-index影响,如果父元素的z-index值很小,那么子元素的z-index值很大也不起作用。失效情况:1.父标签 position属性为relat...原创 2018-11-19 22:09:17 · 285 阅读 · 0 评论