o2team.github.io
o2team.github.io copied to clipboard
利用视口单位实现适配布局
https://aotu.io/notes/2017/04/28/2017-4-28-CSS-viewport-units/index.html
视口单位的出现又为移动端Web开发提供了一种新的适配页面的布局方式
mark
m
很赞的思路!
👍,只是字体好虚,看得眼睛不舒服。
px/baseSize x 100vw
- $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()' ?
手误,写错字母了
但如果想实现桌面端每行10列,移动端每行5列,还不是要用媒体查询?
@ishowman 但如果想实现桌面端每行10列,移动端每行5列,还不是要用媒体查询?
是的哈,这是另外一个独立的问题——用媒体查询解决响应式,跟vw单位做适配页面不是一回事哈
最大尺寸的限制, 320 - 540 320是 iphone5 的尺寸,540是什么呢?
@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的属性全写一遍吗?
@beileixinqing
less要传入属性 .vw('width', 100)
,还是用PostCSS插件处理吧,最方便
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;
}
}
非常漂亮,感谢
1rem=20vw,字体大小会放大一倍,为什么示例代码却没有出现这样的情况,可以发源码研究下么???
@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; }
感谢分享~
有demo的代码吗?
【4.对于需要保持高宽比的图,应改用 padding-top 实现】针对这一点,为什么不直接使用vw或rem设定高度呢?
目前我能想到的就是使用百分数设置宽度时,高度利用padding特性可以实现等比效果,其他设置vw固定值时高度便完全可以同样使用vw了
哇哦,多谢作者分享!
有两个问题 1.使用的的rem方法如何注入全局 2.针对第三方UI框架如何处理