rem 是相对长度单位,是指相对于根元素(即html元素)font-size(字号大小)的倍数。
html {
font-size: 12px;
}
h1 {
font-size: 2rem; /* 2 × 12px = 24px */
}
p {
font-size: 1.5rem; /* 1.5 × 12px = 18px */
}
div {
width: 10rem; /* 10 × 12px = 120px */
}
html {
font-size: 16px;
}
h1 {
font-size: 2rem; /* 2 × 16px = 32px */
}
p {
font-size: 1.5rem; /* 1.5 × 16px = 24px */
}
div {
width: 10rem; /* 10 × 16px = 160px */
}
vw 是相对长度单位,相对于浏览器窗口的宽度,浏览器窗口宽度被均分为100个单位的vw
p {
font-size: 5vw; /* 5 × 3.2px = 16px */
}
div {
width: 20vw; /* 20 × 3.2px = 64px*/
}
p {
font-size: 5vw; /* 5 × 3.75px = 18.75px */
}
div {
width: 20vw; /* 20 × 3.75px = 75px*/
}
示例:
以 iPhone 6/7/8/X 的屏幕宽度 375px 作为基准窗口宽度;
以 15px 最为 html 元素的 font-size,即rem单位的基本长度。
html {
font-size: 15px;
}
h1 {
font-size: 2rem; /* 2 × 15px = 30px */
}
p {
font-size: 1.2rem; /* 1.2 × 15px = 18px */
}
div {
width: 10rem; /* 10 × 15px = 150px*/
}
注意:html 元素的 font-size 不宜过大,也不宜过小。
当 font-size 过大时,以其为基准的 rem 数值会出现精度丢失,造成较大的误差。
当 font-size 过小时,由于很多主流浏览器 font-size 不能小于12px,当 font-size 小于12px 时,会以 12px 展示。此时,rem 单位会以 12px 为基准进行计算,页面就会整个跑偏。
窗口宽度:375px
=> 1vw = 3.75px
=> 15px = ( 15 / 3.75 )vw = 4vw
因此, html 元素的 font-size 可以替换为 4vw
html {
font-size: 4vw;
}
h1 {
font-size: 2rem; /* 2 × 4vw × 3.75px = 30px */
}
p {
font-size: 1.2rem; /* 1.2 × 4vw × 3.75px = 18px */
}
div {
width: 10rem; /* 10 × 4vw × 3.75px = 150px*/
}
当窗口宽度调整为320px时
1vw = 3.2px
4vw = 4 × 3.2px = 12.8px
html {
font-size: 4vw;
}
h1 {
font-size: 2rem; /* 2 × 4vw × 3.2px = 25.6px */
}
p {
font-size: 1.2rem; /* 1.2 × 4vw × 3.2px = 15.36px */
}
div {
width: 10rem; /* 10 × 4vw × 3.2px = 128px*/
}
可见,此时所有以rem为单位的字号和长度都会随着屏幕宽度的放大和缩小而进行等比例缩放。
重要的事情说第二遍
注意:html 元素的 font-size 不宜过大,也不宜过小。
当 font-size 过大时,以其为基准的 rem 数值会出现精度丢失,造成较大的误差。
当 font-size 过小时,由于很多主流浏览器 font-size 不能小于12px,当 font-size 小于12px 时,会以 12px 展示。此时,rem 单位会以 12px 为基准进行计算,页面就会整个跑偏。
窗口宽度300px时
1vw = 3px
4vw = 4 × 3px = 12px
窗口宽度500px时
1vw = 5px
4vw = 4 × 5px = 20px
@media screen and (max-width: 300px) {
html {
width: 300px;
font-size: 12px;
}
}
@media screen and (min-width: 500px) {
html {
width: 500px;
font-size: 20px;
margin: 0 auto; /* 让窗口水平居中展示 */
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>WAP页面</title>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
</head>
<body id="wap">
我是WAP页面
<script src="https://mat1.gtimg.com/libs/jquery2/2.2.0/jquery.js"></script>
<script>
function adapt() {
var agent;
var clientWidth = document.body.clientWidth;
console.log(clientWidth);
if (clientWidth < 800) {
agent = 'wap';
} else {
agent = 'pc'
}
if ($('body').attr('id') !== agent) {
location.href = 'pc.html';
}
}
adapt();
window.onresize = function(){
adapt();
};
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<title>我是PC页面</title>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
</head>
<body id="pc">
我是PC页面
<script src="https://mat1.gtimg.com/libs/jquery2/2.2.0/jquery.js"></script>
<script>
function adapt() {
var agent;
var clientWidth = document.body.clientWidth;
console.log(clientWidth);
if (clientWidth < 800) {
agent = 'wap';
} else {
agent = 'pc'
}
if ($('body').attr('id') !== agent) {
location.href = 'wap.html';
}
}
adapt();
window.onresize = function(){
adapt();
};
</script>
</body>
</html>
在做自适应网页的时候,如果在图片中使用了热区map。图片可以通过样式实现:图片大小随页面变化,MAP中每个area的坐标也随页面等比例的变化效果。根据分辨率自适应热区坐标
有时候在WKWebView加载页面后会发现页面的字会很小, 这是因为原网页没有做手机屏幕尺寸的适配, 那么在后台不做调整的情况下我们移动端怎样来适配页面呢?以下代码可以适配大小
实现 iframe 的自适应高度,使其等于内嵌网页的高度,从而看不出来滚动条和嵌套痕迹。对于用户体验和网站美观起着重要作用。 如果内容是固定的,那么我们可以通过CSS来给它直接定义一个高度,同样可以实现上面的需求。
js动态设置html的字体大小,设计稿宽度750px,设备宽度350px,此时HTML 的font-size:50px,及1rem=50px;设置html的font-size: 13.33vw,设置html的font-size并缩放页面
在网页的<head>中增加以上这句话,可以让网页的宽度自动适应手机屏幕的宽度,其中:width=device-width :表示宽度是设备屏幕的宽度,height=device-height :表示宽度是设备屏幕的宽度
利用vw、vh、vmin、vmax,vw表示的是viewport的宽度,也就是视口的宽度,vh表示的是视口的高度;利用双层嵌套来写,将外层的div的position设置relative,内层的position设置为absoult
最近在做大屏可视化,页面数据展示基本都是用百度的echarts,因为页面要做自适应,所以当视窗变化的时候echarts也要变化。window.onresize 可以解决这个问题。而一般一个页面不可能只引用一个表格,当你引用多个的时候,有些地方需要注意。
css实现左侧宽度固定右侧宽度自适应:定位、浮动、margin;css3弹性盒模型实现自适应:上下高度固定中间高度自适应、左侧宽度固定右侧宽度自适应
拖动效果的实现基本都是dom操作来实现的,通过拖动分隔线,计算分隔线与浏览器边框的距离(left),来实现拖动之后的不同宽度的计算;当拖动分隔线1时,计算元素框left和mid;当拖动分隔线2时
HTML中pre和textarea可以显示预格式化的文本。即保留空格和换行符。而不必添加<br>和 等HTML元素来添加换行和打印空格。textarea也能跟prev一样保留内容格式,但是元素高度是固定的
内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!