移动web开发 rem适配布局 +苏宁首页案例+HBuilder下载less插件

rem基础

文字大小随着页面自适应
页面元素宽高等比例随着页面自适应

rem单位
rem（root em ）是一个相对单位，rem的基准是html元素的字体大小。
em是父元素字体大小。
rem的优点：可以通过修改html里面的文字大小来改变页面元素的大小，可以整体控制。

媒体查询

媒体查询（Media Query）是css3新语法。

@media 可以针对不同的屏幕尺寸设置不同的样式。

语法规范：
@media mediatype and|not|only （media feature）{
css-code；
}

用@media开头一定要有@符号
mediatype 媒体类型
关键字 and not only
media feature 媒体特性，必须由小括号包含。

mediatype 媒体类型
将不同的终端设备划分为不同的类型，称为媒体类型。

值	说明
all	用于所有设备
print	用于打印机或打印预览
scree	用于电脑屏幕，平板电脑，智能手机等。

关键字 and not only

and ：将多个媒体特性连接在一起。
not ：排除某个媒体类型。
only ：指定某个特定的媒体类型。

media feature 媒体特性

值	说明
width	定义输出设备中页面可见区域的宽度
max-width	定义输出设备中页面可见最大区域宽度
min-width	定义输出设备中页面可见最小区域宽度

媒体查询案例–背景变色

<style>/* 设置宽度是要用: 不要使用= */@media screen and (max-width:539px){body{background-color: blue;}}@media screen and (min-width:540px) and (max-width:969px){body{background-color: green;}}@media screen  and (min-width:970px){body{background-color: red;}}</style>

screen，and不能省略；
利用层叠性第二步的(max-width:969px)可以省略，简化代码，一样能达到效果。

引入资源
引入不同的css文件
在link中添加下面代码。

 <link  media="screen  and (min-width:320px)">

Less基础

css弊端：
css代码没有逻辑，冗余度高；不方便维护和扩展，不利于复用；css没有计算能力。
less可以很好解决css的弊端。
less是css的扩展语言，在css的基础上，加入了程序式语言的特性。

less是一门css预处理语言，它扩展了css的动态特性。是一门新的语言。

less的使用
新建.less的文件，在这个文件里书写less语句。
less变量
@变量名：值；
（变量名命令规范：以@为前缀；不能包含特殊字符；不能以数字开头；严格区分大小写）

less编译

将less文件编译成css文件html才能使用,
下载less插件(hbuilder 打开上方的工具–>插件安装–>安装新插件–>前往安装市场安装–>搜索"less" ,找到less下载–>使用HBuilder导入插件–>在hbuilder 上方的工具中点击"外部命令插件配置"–>点击"package.json"–>在里面找到代码改为true),最后重启软件.

重启软件,保存.less文件后会自动生成.css同名的文件,把这个css文件引入到html页面中即可.

less嵌套
1、less嵌套子元素的样式直接写在父元素里面。
2、如果有伪类选择器、伪元素选择器、交集选择器需要在内层前添加&符号。

less运算
在less中数字、颜色、变量都是可以参与运算的。

运算符的左右两侧必须敲空格隔开；
两个数参与运算，如果只有一个数有单位，则最后结果以这个单位为准；
如果两个数参与运算，两个数都有单位，且单位不同，以第一个数的单位为准。

**rem适配方案

适配方案一：

less
媒体查询
rem

1、首先选一套标准尺寸，一般以750为准
2、我们用屏幕尺寸处以划分的份数，得到了html里面的文字大小，但是不同屏幕下得到的文字大小是不一样的。
3、页面元素的rem值=页面元素在750像素下的px值/html里面的文字大小。

适配方案二：

flexible.js （淘宝）
rem
flexible.js可以到github上下载
1、视口标签，初始化样式；引入flexible.js和css文件。
2、px转换成rem 插件cssrem
3、hbuilder直接在工具–>设置–>编辑器配置–>里修改 px转rem比值。

苏宁首页案例制作

设计图采取750像素。

<html><head><meta charset="utf-8"><meta name="viewport"content="width=device-width,initial-scale=1.0,user-scalable=no,maximum-scale=1.0,minimum-scale=1.0" /><title></title><link rel="stylesheet" href="css/normalize.css"><link rel="stylesheet" href="css/index.css"></head><body><!-- 顶部搜索框 --><div class="header-nav"><div class="search-content"><a href="#" class="classify"></a><div class="search"><input type="text" value="厨卫保暖季..."></div><a href="#" class="login"></a></div></div><!-- banner部分 --><div class="banner"><img src="upload/banner.jpg" alt=""></div><!-- 广告部分  缺少图片--><div class="ad"><a href="#"><img src="" alt=""></a><a href="#"><img src="" alt=""></a><a href="#"><img src="" alt=""></a></div><!-- 导航部分 nav --><nav><a href="#"><img src="data:images/nav1.png" alt=""><div class="title">苏宁家电</div></a><a href="#"><img src="data:images/nav2.png" alt=""><div class="title">苏宁超市</div></a><a href="#"><img src="data:images/nav3.png" alt=""><div class="title">苏宁宜品</div></a><a href="#"><img src="data:images/nav4.png" alt=""><div class="title">手机数码</div></a><a href="#"><img src="data:images/nav5.png" alt=""><div class="title">家居家装</div></a><a href="#"><img src="data:images/nav6.png" alt=""><div class="title">服饰百货</div></a><a href="#"><img src="data:images/nav7.png" alt=""><div class="title">生活家电</div></a><a href="#"><img src="data:images/nav8.png" alt=""><div class="title">签到有礼</div></a><a href="#"><img src="data:images/nav9.png" alt=""><div class="title">领券中心</div></a><a href="#"><img src="data:images/nav10.png" alt=""><div class="title">更多频道</div></a></nav></body>
</html>

html {font-size: 50px;
}
a {text-decoration: none;
}
@media screen and (min-width: 320px) {html {font-size: 21.33333333px;}
}
@media screen and (min-width: 360px) {html {font-size: 24px;}
}
@media screen and (min-width: 375px) {html {font-size: 25px;}
}
@media screen and (min-width: 384px) {html {font-size: 25.6px;}
}
@media screen and (min-width: 400px) {html {font-size: 26.66666667px;}
}
@media screen and (min-width: 414px) {html {font-size: 27.6px;}
}
@media screen and (min-width: 424px) {html {font-size: 28.26666667px;}
}
@media screen and (min-width: 480px) {html {font-size: 32px;}
}
@media screen and (min-width: 540px) {html {font-size: 36px;}
}
@media screen and (min-width: 720px) {html {font-size: 48px;}
}
@media screen and (min-width: 750px) {html {font-size: 50px;}
}
body {min-width: 320px;width: 15rem;margin: 0 auto;line-height: 1.5;font-family: Arial, Helvetica, STHeiTi, sans-serif;background: #f2f2f2;height: 2000px;
}
.header-nav {position: fixed;top: 0;left: 50%;transform: translate(-50%);width: 15rem;height: 1.76rem;background-color: #FFDB47;
}
.search-content {display: flex;width: 13.64rem;height: 1.76rem;margin: 0 0.68rem;z-index: 999;
}
.classify {flex-shrink: 0;width: 1.2rem;height: 1.5rem;margin: 0.15rem;background: url(../images/classify.png) no-repeat;background-size: 1.16rem 1.4rem;
}
.search {flex: 1;display: flex;
}
.search input {outline: none;flex: 1;width: 100%;border: 0;height: 1.32rem;border-radius: 0.66rem;background-color: #fff2cc;margin-top: 0.24rem;font-size: 0.5rem;padding-left: 1.1rem;color: #757575;
}
.login {flex-shrink: 0;width: 1rem;height: 1.5rem;margin: 0.16rem;background: url(../images/login.png) no-repeat;background-size: 1rem 1.5rem;
}
.banner {width: 15rem;height: 7rem;
}
.banner img {width: 100%;height: 100%;
}
.ad {display: flex;
}
.ad a {flex: 1;background-color: pink;
}
.ad a img {width: 100%;
}
nav {background-color: #eee;width: 15rem;
}
nav a {float: left;width: 3rem;height: 2.8rem;text-align: center;font-size: 0;
}
nav a img {width: 1.64rem;height: 1.64rem;margin: 0.2rem auto 0;
}
nav a .title {font-size: 0.5rem;color: #333;
}