o2team.github.io
o2team.github.io copied to clipboard
o2team
利用视口单位实现适配布局
https://aotu.io/notes/2017/04/28/2017-4-28-CSS-viewport-units/index.html
视口单位的出现又为移动端Web开发提供了一种新的适配页面的布局方式
- $vm_fontsize: 75; // iPhone 6尺寸的根元素大小基准值 @function rem($px) { @return ($px / $vm_fontsize ) * 1rem; }
这里有个问题，假如设计稿是基于 750px 设计的。 @return ($px / $vm_fontsize / 2 ) * 1rem; 应该在 '/ 2' 吧。
- $vm_base: 375; @function vw($px) { @return ($px / 375) * 100vw; }
方法定义是 vw, 为什么下面的都是 'vw()' ?
2 .$vm_base: 375; @function vw($px) { @return ($px / 375) * 100vw; } 方法定义是 vw, 为什么下面的都是 'vm()' ?
@qq757622960 2 .$vm_base: 375; @function vw($px) { @return ($px / 375) * 100vw; } 方法定义是 vw, 为什么下面的都是 'vm()' ?
手误，写错字母了
@ishowman 但如果想实现桌面端每行10列，移动端每行5列，还不是要用媒体查询？
是的哈，这是另外一个独立的问题——用媒体查询解决响应式，跟vw单位做适配页面不是一回事哈
@qq757622960 最大尺寸的限制, 320 - 540 320是 iphone5 的尺寸，540是什么呢？
是Sony Xperia Z Ultra这个机型
font-size: ($vw_fontsize / ($vw_design / 2)) * 100vw; 请问楼主这句是什么意思，为什么设置 根节点为20VM
感觉对不上比例，font-size: ($vw_fontsize / ($vw_design / 2)) * 100vw; 这里应该不用再 /2 ，否则再375模拟器里，如果px完全按照750设计图的PX数值转化，会放大一倍，不知道有没有人跟我一样的情况
感觉对不上比例， $vm_fontsize: 75; // iPhone 6尺寸的根元素大小基准值 @function rem($px) { @return ($px / $vm_fontsize ) * 1rem; } 在375模拟器里，如果px完全按照750设计图的PX数值转化，会放大一倍，不知道有没有人跟我一样的情况，所以所有750我们要先自己除以2才能作为css里面的px数值
作者您好，关于这句话我不懂（这样的页面虽然看起来适配得很好，但是你会发现由于它是利用视口单位实现的布局，依赖于视口大小而自动缩放，无论视口过大还是过小，它也随着视口过大或者过小，失去了最大最小宽度的限制。）这指什么呢？？？vw已经是适口的宽度了，过大过小指什么？？？可以详细介绍下码？？？？并不能理解
@sydneytan font-size: ($vw_fontsize / ($vw_design)) * 100vw; 你这种情况$vw_design就不需要除以2
//iPhone 6尺寸作为设计稿基准 $vm_base: 375; @function vw($px) { @return ($px / 375) * 100vw; } 这种传参实现一个运算的函数形式，在less中怎么实现呢？只能把所有可能用到px的属性全写一遍吗？
html {
font-size: ($vw_fontsize / ($vw_design / 2)) * 100vw;
// 同时，通过Media Queries 限制根元素最大最小值
@media screen and (max-width: 320px) {
font-size: 64px;
}
@media screen and (min-width: 540px) {
font-size: 108px;
}
}
这样写会导致1rem === 20vw的，应该改成
html {
font-size: ($vw_fontsize / $vw_design) * 100vw;
// 同时，通过Media Queries 限制根元素最大最小值
@media screen and (max-width: 320px) {
font-size: 32px;
}
@media screen and (min-width: 540px) {
font-size: 54px;
}
}
@qq757622960
- $vm_fontsize: 75; // iPhone 6尺寸的根元素大小基准值 @function rem($px) { @return ($px / $vm_fontsize ) * 1rem; }
这里有个问题，假如设计稿是基于 750px 设计的。 @return ($px / $vm_fontsize / 2 ) * 1rem; 应该在 '/ 2' 吧。 我也是除以2才实现的，感觉写的有问题 2. $vm_base: 375; @function vw($px) { @return ($px / 375) * 100vw; }
方法定义是 vw, 为什么下面的都是 'vw()' ?
这个限制大小是根据什么来限制最大最小值的？
// 同时，通过Media Queries 限制根元素最大最小值 @media screen and (max-width: 320px) { font-size: 64px; } @media screen and (min-width: 540px) { font-size: 108px; }
【4.对于需要保持高宽比的图，应改用 padding-top 实现】针对这一点，为什么不直接使用vw或rem设定高度呢？
目前我能想到的就是使用百分数设置宽度时，高度利用padding特性可以实现等比效果，其他设置vw固定值时高度便完全可以同样使用vw了
