-
rem原理和简介:rem会基于html页面的根元素的字体大小的变化而变化。
查看全部 -
百分比和mediaquery结合布局。
@media screen and (max-width:320px)表示屏幕尺寸小于320时才适用的样式
多个媒体查询的使用:
@media screen and (min-width:600px) and (max-width:900px){ body {background-color:#f5f5f5;} }
https://www.cnblogs.com/zyl-Tara/p/5519144.html
查看全部 -
常见布局适配方案
查看全部 -
web手机端的特性:
适合html5新特性,所以移动端页面也叫h5页面;
跨平台;安卓,ios
基于浏览器,大部本浏览器都是用的webkit内核,所以开发的h5页面也只要兼荣webkit就行
查看全部 -
REM适配
查看全部 -
设计稿px转rem;
查看全部 -
使用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);
}
}
查看全部 -
课程内容挺好的
查看全部
举报