做公司网站外包,wordpress笔记本主题下载失败,新网站推广方案,注册网站名称使用vw布局方案#xff0c;实现视口宽度不同#xff0c;网页元素宽高等比缩放效果 目录
一、vw和vh基本使用
二、vw和vh布局流程
三、vh布局弊端 一、vw和vh基本使用 vw和vh为相对单位#xff0c;相对视口尺寸计算结果 1vw 1/100视口宽度 1vh 1/100视口高度 效果: 代码…使用vw布局方案实现视口宽度不同网页元素宽高等比缩放效果 目录
一、vw和vh基本使用
二、vw和vh布局流程
三、vh布局弊端 一、vw和vh基本使用 vw和vh为相对单位相对视口尺寸计算结果 1vw 1/100视口宽度 1vh 1/100视口高度 效果: 代码:
!DOCTYPE html
html langen
headmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0title体验vw和vh/titlestyle* {margin: 0;padding: 0;}.box {width: 50vw;height: 30vw;background-color: pink;}.box {width: 50vh;height: 30vh;background-color: #ccc;}/style
/head
bodydiv classbox/div
/body
/html
二、vw和vh布局流程 根据设计稿确定1vw尺寸 px单位转换成vw单位尺寸 px / (1/100视口宽度) 效果展示: 代码:
html代码段:
!DOCTYPE html
html langen
headmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0titlevw适配/titlelink relstylesheet href./demo.css
/head
bodydiv classbox/div
/body
/html
less代码段:
* {margin: 0;padding: 0;
}// .box {
// // width: 68px;
// // 68 / 3.75
// width: (68 / 3.75vw);
// height: (29 / 3.75vw);
// background-color: pink;
// }.box {width: (68 / 6.67vh);height: (29 / 6.67vh);background-color: #ccc;
}
css代码段:
* {margin: 0;padding: 0;
}
.box {width: 10.19490255vh;height: 4.34782609vh;background-color: #ccc;
}
三、vh布局弊端
vh是相对视口高度计算尺寸, 需要考虑全面屏视口高度尺寸偏大 本质用vw和vh都可以,千万别一个盒子的宽高vw和vh混用 效果及代码:
html:
!DOCTYPE html
html langen
headmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0titlevh/titlelink relstylesheet href./demo.css
/head
bodydiv classbox/div
/body
/html
less:
* {margin: 0;padding: 0;
}.box {// 宽度用vw,高度用vh// 68 * 29width: (29 / 3.75vw);height: (29 / 6.67vh);background-color: pink;
}
css:
* {margin: 0;padding: 0;
}
.box {width: 7.73333333vw;height: 4.34782609vh;background-color: pink;
}
