-
设计稿px转rem；
查看全部 -
rem查看全部
-
1，启动自适应浏览器宽度
<meta name=”viewport” content=”width=device-width, initial-scale=1, maximum-scale=1″>
2，设置默认rem的字体大小
<html> font-size:16px;</html>
3，设置宽度规则
@media screen and (max-width:320px;) {
/* css */
}
@media screen and (min-width:321px;) {
/* css */
}
4，动态设置高度
@media only screen and (min-width:321px) {html {font-size:62.5%!important}}
@media only screen and (min-width:361px) {html {font-size:70.31%!important}}
@media only screen and (min-width:376px) {html {font-size:73.24%!important}}
@media only screen and (min-width:481px) {html {font-size:94%!important}}
@media only screen and (min-width:561px) {html {font-size:109%!important}}
@media only screen and (min-width:641px) {html {font-size:125%!important}}
html{font-size:62.5%; font-size:10px;}
查看全部 -
完整的网页步骤：
1，启动自适应浏览器宽度
<meta name=”viewport” content=”width=device-width, initial-scale=1, maximum-scale=1″>
2，设置默认rem的字体大小
<html> font-size:16px;</html>
3，设置宽度规则
@media screen and (max-width:320px;) {
/* css */
}
@media screen and (min-width:321px;) {
/* css */
}
查看全部 -
使用rem的步骤：加入head标签
Viewport 基础
一个常用的针对移动网页优化过的页面的 viewport meta 标签大致如下：
<meta name=”viewport” content=”width=device-width, initial-scale=1, maximum-scale=1″>
width：控制 viewport 的大小，可以指定的一个值，如果 600，或者特殊的值，如 device-width 为设备的宽度（单位为缩放为 100% 时的 CSS 的像素）。
height：和 width 相对应，指定高度。
initial-scale：初始缩放比例，也即是当页面第一次 load 的时候缩放比例。
maximum-scale：允许用户缩放到的最大比例。
minimum-scale：允许用户缩放到的最小比例。
user-scalable：用户是否可以手动缩放查看全部 -
rem就是一个字体单位，rem会根据屏幕大小动态变化
查看全部 -
在head部分，加入 @media 媒体类型 and (媒体属性){}
查看全部 -
box-sizing:border-box;防止屏幕晃荡；
查看全部 -
移动web开发与适配查看全部
-
移动web开发适配
查看全部 -
css-loader
node-sass
sass-loader
style-loader
url-loader
webpack
查看全部 -
@function px2rem($px){
$rem:37.5px;
@return($px/$rem)+rem;
}
.hello{
width:px2rem(100px);
height:px2rem(100px);
&.b{
width:px2rem(50px);
height:px2rem(50px);
}
}
查看全部 -
课程内容挺好的
查看全部 -
基准值就是html根元素的font-size
rem的数值就是换算出的px的rem值，1rem如果为16px，那么170px就等于170/16rem
查看全部 -
rem进阶知识大纲
查看全部
举报