-
ler htmlWidth = document.documentElement.clientWidth. || document.body.clienWidth;获取屏幕宽度(viewport)
查看全部 -
获取视窗高度
查看全部 -
<script>
//获取视窗宽度
var htmlWidth = socument.documentElement.clienWidth || documnet.body.clienWidth;
//测试获取宽度
console.log(htmlWidth);
</script>
查看全部 -
rem的基准值就是html的fontSize
以iphone6为标准,width为375px,那么rem基准值就是37.5px,用想要的像素值除以这个标准就可以了 。
查看全部 -
1、width设置为100%是在设置padding-left或padding-right时屏幕的宽度不在是100%就会出现左右滚动(解决方法box-sizing:border-box)
2、设置一个元素绝对定位时,先设置它的父元素相对定位
3、background-size:contain
查看全部 -
1、sass语法
(1)定义一个sass变量
2、设置html的dome的fontsize
(1)获取屏幕的宽度
(2)获取html的dome节点
(3)利用获取到的html节点的style的fontsize等于获取到屏幕的宽度/10+“px”
3、&符号代表的是父元素
查看全部 -
1、rem
(1)1rem等于浏览器默认字体的大小,也可以利用ren设置宽、高
(2)通过设置html字体的大小来改变1rem等于多少个px
2、媒体查询来设置字体大小
3、js设置字体大小
(1)获取视窗宽度
document.documentElement.clientWidth || document.body.clientWidth
(2)获取视窗的高度
document.getElementByTagName('html')[0]
查看全部 -
1、响应式布局
(1)百分比(最简单)
(2)媒体查询
@media screen and (max-width:320px){当他的宽度小于等于320px是适应}
@media screen and (min-width:321px)
当他的宽度大于等于321px时适应{}
查看全部 -
默认ipone6的设计稿
@function px2rem($px){
$rem : 37.5px;
@return ($px / $rem) +rem;
}
查看全部 -
计算尺寸。。
查看全部 -
字体单位:值根据html根元素大小而定,同样可以作为宽度、高度等单位
适配原理:将px替换成rem,动态修改html的font-size适配
兼容性:ios6以上和android2.1以上,基本覆盖所有流行的手机系统
浏览器的默认字体是16px,也就是说1rem=16px
通过媒体查询设置html的font-size有缺点,页面的变化是根据媒体查询走的,没有js动态设置的更加细致
通过js动态设置html的font-size
let htmlWidth=document.documentElement.clientWidth || document.body.clientWidth;//获取视窗宽度
let htmlDom=document.getElementsByTagName('html')[0];
htmlDom.style.fontSize=htmlWidth/10+'px';//iphone6的宽度375除以10是37.5,与scss中function里面的$rem基准值一致
window.addEventListener('resize',(e)=>{
let htmlWidth=document.documentElement.clientWidth || document.body.clientWidth;
htmlDom.style.fontSize=htmlWidth/10+'px';
})
全局安装node-sass:npm install node-sass -g
a.scss转化成b.css:node-sass a.scss b.css
a.scss里面通过function自动把px计算成rem值
@function px2rem($px){
$rem:37.5px;/*以iphone6的375为基准*/
@return ($px/$rem)+rem;
}
.hello{
width:px2rem(100px);height:px2rem(100px);font-size:px2rem(18px);
}
字号,宽高,margin,padding等,只要是用到px的地方,都可以写成rem
查看全部 -
最后一个函数,自动适配,动态取值设定,有点模糊,后面再看看具体资料
查看全部 -
news-item 本来设置了100% 但是由于设置了左右的 padding 所以,整体
宽度超过了100% ,所以会出现左右滚动条效果,这里为了不出现滚动条
,就需要强制下,用 box-sizing: border-box;查看全部 -
18行的 &:写法和 24行的单独写法,是等同的! 18行的 nth-child(2) 表示 header-itme 的第二个 元素 单独设置下CSS
查看全部 -
JS 动态控制页面的 fontsize 大小
这里的 let 相当于 var
如截图所示:页面的 fontsize 大小是 当前视窗宽度的 十分之一 PX
查看全部
举报