css
Ming-code
WEB工程师
展开
-
css select 禁止下拉选择
style="pointer-events: none;"原创 2021-01-08 17:00:40 · 1620 阅读 · 0 评论 -
Sticky footer 布局
<div class="wrapper clearfix"> <div class="content"> // 这里是页面内容 </div></div><div class="footer"> // 这里是footer的内容</div>css.wrapper { min-height: 100%;}.wrapper .content{ padding-bottom原创 2020-12-01 15:14:39 · 68 阅读 · 0 评论 -
点击屏幕 波纹效果
* { user-select: none; cursor: default; } body, html { height: 100%; font-family: helvetica neue,helvetica,arial,sans-serif; } h1, p { text-align: center; position: relative; z-index: 1; } h1 { padding: 50px 0;原创 2020-08-14 10:42:59 · 209 阅读 · 0 评论 -
css 1倍图 2倍图 3倍图
css二倍图的使用使用 CSS 的 DevicePixelRatio 媒查询属性参考 CSS 或 srcset 让浏览器自动切换 1X/2X/3X图像移动端项目中 @2x 图 和 @3x 图 的使用(需要支持css3)/默认大小/.photo {background-image: url(image100.png);}/* 如果设备像素大于等于2,则用2倍图 /@media screen and (-webkit-min-device-pixel-ratio: 2),screen and原创 2020-05-15 15:56:53 · 2004 阅读 · 0 评论 -
css3 十大滤镜功能
1、模糊滤镜(px)给图像设置高斯模糊。值越大越模糊,默认是0,就是不模糊。filter:blur(4px);2、亮度(%)给图片应用一种线性乘法,使其看起来更亮或更暗。如果值是0%,图像会全黑。值是100%,则图像无变化。其他的值对应线性乘数效果。值超过100%也是可以的,图像会比原来更亮。如果没有设定值,默认是1。 filter: brightness(200%);3、对比度(...原创 2020-04-26 16:26:13 · 336 阅读 · 0 评论 -
手机端长按文字复制
微信默认就是支持文本长按选择,所以只需要调整字体样式后,几乎不需要写什么代码,这份任务就完成了,但是。。。情况并不如我所想。找了半天并没有发现什么异样,但是就是长按无法复制。解决思路1.新写一个页面,在微信端浏览,发现可以长按复制(排除微信端不能长按复制的猜想)2.删除原页面的脚本文件,发现可以仍然不可以长按复制(排除脚本影响)3.删除原页面公共css,发现可以长按复制(确定公共css影...原创 2020-02-18 12:35:24 · 2401 阅读 · 0 评论 -
css3 媒体查询
/* 小于400 */ @media screen and (max-width:300px) { html,body { font-size:0.58rem;}}/* 大于960 小于1200 */ @media screen and (min-width:301px) and (max-width:350px) { html,body { font-size:0.6rem...转载 2019-08-23 14:26:48 · 364 阅读 · 0 评论 -
css3 媒体查询@media only screen and (min-width: 640px) { html { font-size: 32px; background: #
@media only screen and (min-width: 640px) { html { font-size: 32px; background: #8cbc8b; } body { width: 640px; margin: 0 auto; } }@media only screen and (min-width: 620px) and...原创 2019-08-23 14:13:54 · 2557 阅读 · 2 评论 -
手机不同分辨率下的尺寸
@media only screen and (min-width:320px) and (min-height:480px){}@media only screen and (min-width:320px) and (min-height:568px){}@media only screen and (min-width:360px) and (min-height:640px){...原创 2019-08-21 14:32:11 · 224 阅读 · 0 评论