-
background-size:contain
保持图像的纵横比并将图像缩放成将适合背景定位区域的最大大小。
查看全部 -
使用:before的方式实现icon,一定程度上减少dom,更优雅
查看全部 -
一般情况下,padding和border不包含在width中,定义width:100%后,再设置padding或border会增加width。
可以使用box-sizing:border-box消除影响,将padding和border包含在width中
查看全部 -
结合sass实现动态转换rem
查看全部 -
scss
安装:npm install node-sass
编译:node-sass a.scss b.css
生产环境当中,一般使用压缩选项。
sass --style compressed nav.sass nav.css
也可以让SASS监听某个文件或目录,一旦源文件有变动,就自动生成编译后的版本。
sass --watch nav.scss:nav.css
查看全部 -
使用js动态改变font-size更好
查看全部 -
rem与media query结合可达到动态修改font-size的效果
查看全部 -
rem转换规则
1rem = 16px (浏览器默认font-size,可通过修改html的font-size改变大小)
查看全部 -
移动端设置viewport
<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no">"
width:控制 viewport 的大小,可以指定的一个值,如果 600,或者特殊的值,如 device-width 为设备的宽度(单位为缩放为 100% 时的 CSS 的像素)。
height:和 width 相对应,指定高度。
initial-scale:初始缩放比例,也即是当页面第一次 load 的时候缩放比例。
maximum-scale:允许用户缩放到的最大比例。
minimum-scale:允许用户缩放到的最小比例。
user-scalable:用户是否可以手动缩放查看全部 -
rem介绍
查看全部 -
使用MediaQuery两种方式
查看全部 -
Media Query介绍
查看全部 -
常见移动web适配方法
查看全部 -
rem学习占坑。
查看全部 -
12345
查看全部
举报