屏幕分辨率和css技巧

1.目前台式电脑与笔记本适配测试数据以下为参考数值：

台式机和笔记本电脑的分辨率：2560x1440 1920x1200 1680x1050 1600x1200 1440x900 1366x768 1280x1024 1280x800 1280x768 1152x864 1024x768 800x600

平板电脑分辨率：iPad（ 768x1024 ）iPad Pro（1024x1366）Nexus 10（800x1280） Nexus 7（600x960）—显示都是不完整的

智能手机分辨率：Nexus 5（360x598） Nexus 5x（412x684） iPhone 6 Plus（414x736） iPhone 6（375x667） iPhone 5（320x568） iPhone 4（320x480）------显示都是不完整的

2.突然出现滚动条禁止屏幕抖动：

body {padding-right: calc(100vw - 100%);
}

3.更改（美化）滚动条样式：

//滚动条整体部分
::-webkit-scrollbar {width: 6px;height: 6px;background-color: transparent;
}
//滚动条轨道部分
::-webkit-scrollbar-track {background-color: transparent;
}
//滚动条滑块部分
::-webkit-scrollbar-thumb {border-radius: 3px;background-image: linear-gradient(135deg, #09f, #3c9);
}

4.自动识别文本换行

* {white-space: pre-line;
}

5.控制文本溢出：

.elem {width: 400px;line-height: 30px;font-size: 20px;&.sl-ellipsis {overflow: hidden;text-overflow: ellipsis;white-space: nowrap;}&.ml-ellipsis {display: -webkit-box;overflow: hidden;text-overflow: ellipsis;-webkit-line-clamp: 3;-webkit-box-orient: vertical;}
}

6.滚动条回到顶部：
const gotopBtn = document.getElementById(“gotop-btn”);
openBtn.addEventListener(“click”, () => document.body.scrollIntoView({ behavior: “smooth” }));

7.页面暗黑模式：
html{
filter: invert(1) hue-rotate(180deg);
}

8.页面悼念(全灰)模式：
html{
filter: grayscale(1);
}
9.两端文本对齐：
text-align-last:justify

10.禁用效果：
pointer-events:none
11.aspect-ratio维持图片长宽比：
aspect-ratio：1/1
12.clamp() 实现页面的响应式：
clamp() 的工作原理是“夹紧”或限制一个灵活的值，使其处于最小和最大范围之间
img {
width: clamp(15vw, 800%, 100%);
}
h1 {
font-size: clamp(20px, 5vw, 35px);
}

屏幕分辨率和css技巧相关推荐

根据屏幕分辨率获取css,根据判断浏览器类型屏幕分辨率自动调用不同CSS的代码...
既判断分辨率,也判断浏览器重新完善代码,使之成为判断浏览器类型屏幕分辨率自动调用不同CSS的代码. 解释: var IE1024=""; var IE800="&quo ...
字体大小自适应屏幕分辨率 CSS解决方案
字体大小自适应屏幕分辨率 CSS解决方案参考文章: (1)字体大小自适应屏幕分辨率 CSS解决方案 (2)https://www.cnblogs.com/love0618/p/4020752.htm ...
使用CSS 媒体查询功能满足不同屏幕分辨率要求
http://www.adobe.com/cn/devnet/dreamweaver/articles/dw_html5_pt3.html 这是探索Dreamweaver CS5.5的HTML5和CS ...
css 根据不同屏幕设置间距_CSS根据屏幕分辨率宽度自动适应的办法
第二种办法是CSS3选择CSS 允许网页宽度自动调整 "自适应网页设计"到底是怎么做到的?其实并不难. 首先,在网页代码的头部,加入一行viewport元标签. 1. viewpo ...
响应式设计：理解设备像素，CSS像素和屏幕分辨率
概述屏幕分辨率.设备像素(device-width)和CSS像素(width)这些术语,在很多语境下,是可互换的,但也因此容易在有差异的地方引起混淆,实际上它们是不同的概念. 屏幕分辨率和设备像素是 ...
CSS根据屏幕分辨率宽度自动适应的办法
CSS根据屏幕分辨率宽度自动适应的办法第一种办法是JS选择CSS <SCRIPT language=javascript> <!-- Begin if (screen.width ...
让网页版面自动适应屏幕分辨率的技巧
[转自][http://www.qiuyucity.com/show/?13136.htm] 如何让网页版面更适合浏览者呢?这里有技巧刚做好网页的朋友们经常收到网友们的反馈,说自己的网页排版乱得一塌 ...
[C# 开发技巧系列]如何动态设置屏幕分辨率
原文 http://www.cnblogs.com/zhili/archive/2013/05/23/ChangeResolution.html 因为最近在MSDN论坛和stackflow中看到一些朋 ...
css 动态rem_提高幸福感的 9 个 CSS 技巧
在这篇文章我会介绍 9 个使你的 CSS 更加简洁优雅的使用技巧.这些技巧小生经常使用,觉得挺高效实用,所以也就有了这篇文章. 9 个 CSS 技巧特此声明,这里说的 CSS 并不止包含 CSS,也 ...

屏幕分辨率和css技巧

屏幕分辨率和css技巧相关推荐

最新文章

热门文章