您的位置：首页 > 移动开发

媒体查询，移动端常见布局以及其他

2017-04-02 00:00 741 查看

媒体查询

如果使用过了bootstrap框架，那么对媒体查询应该不会陌生了吧！(bootstrap中文网链接：bootstrap中文网)

体查询就是可以根据设备显示器的特性（视口宽度、屏幕比例、设备方向-横向或者竖向等）为其设定CSS样式

为什么响应式设计需要媒体查询？因为没有CSS3的媒体查询模块，就不能针对设备特性（尤其是视口宽度）设置特定的CSS样式。

}
/* 当屏幕尺寸 大于 等于 480的时候 应用 括号内的样式 */
@media screen and (min-width: 480px) {
body {
background-color: lightgreen;
}
.header{
display: block;
}
}
/* 最大
小于等于900的时候
*/
@media screen and (max-width:900px){
body{
background-color: skyblue;
}
}

媒体查询在bootstrap的css样式的后几行都是，简而言之，我们要适应不同大小屏幕的样式，可以考虑使用媒体查询。

注意点

关键字和关键字之间需要有空格，最起码一个，可以多个。

如果两个媒体查询块中的语法有重叠部分,那么靠下的会覆盖上面的。

如果想要自己手写媒体查询完成页面布局,那么可以想象得到要写很多的css。

左定宽-右自适应布局

在做移动端页面时，尤其是订餐类App，我们经常会看到有左边固定导航栏，右边上下滑动内容栏的布局，这也是最常见的布局，我们暂时先不要考虑那么复杂，先可以想一下怎样才能实现这种布局呢？

方式一：padding+定位放到最左边

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
.container{
border: 1px solid #0094ff;
padding-left: 100px;
position: relative;
width: 100%;

box-sizing: border-box;
}
.left{
width: 100px;
height: 100px;
border: 1px solid green;
position: absolute;

/* 用定位 放到 最左边即可 */
left: 0px;
top: 0px;
}
.right{
border: 1px solid red;
}
</style>
</head>
<body>
<h1>padding方式实现</h1>
<div class="container">
<div class='left'></div>
<div class="right">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
</div>
</body>
</html>

方式二：浮动

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
.container{
border: 1px solid #0094ff;
}
.left{
width: 100px;
height: 100px;
border: 1px solid #0094ff;
float: left;
}
.right{
overflow: hidden;
}
</style>
</head>
<body>
<h1>使用浮动的方式实现布局</h1>
<div class="container">
<div class="left"></div>
<div class="right">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
</div>
</body>
</html>

其他方式

其实还有很多方式(flex等)可以实现，这里就不一一介绍了，可以看到这里：其他实现左定宽-右自适应布局的方式

zepto简单介绍

zepto.js 涵盖了基本的功能,比如css,链式编程等语法跟jq基本一致。

event.js 如果想要绑定事件需要导入该模块。

fx.js 添加之后能够使用animate方法原理是对于过渡的封装。

使用注意:语法跟jq高度类似,使用时需要根据需求导入不同的包。

移动端需要注意的点

设计稿

一般拿到设计稿之后，会分成640和750两个文件夹，每个里面会人为的将设计稿分为10/20/30等若干份。

eg:计算rem比例值和需要设置的html的font-size大小：

640文件夹中的20的文件夹为例子，每一份所占的比例就是640/20=30px;那么设置的html中的font-size就是32px;如果要设置一个容器的高度是128px的，那么使用比例计算就是：128px/32px=4份，那么height:4rem(此时的rem也就是html中的font-size的字体大小值)。

这样获取的是屏幕宽度为640,如果屏幕宽度是320，(还是以20为例子)那么需要改变的是html的font-size:自定义媒体查询：@media screen and (width:320px){html{font-size:16px;}}

640设计稿：为了方便计算设置rem顶级节点的字体大小，一般会将屏幕分为若干等份，比如10份，640/10=64份；

设计稿设置html字体大小：64px;那么在640设计稿中120px的容器高度：120px/64rem。

字体图标

美工一般给我们的是做好的图标（svg格式），我们需要将他转化为字体图标。进行字体图标转换：字体图标转换

自定义字体图标：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
@font-face {
font-family: 'icomoon';
src:  url('fonts/icomoon.eot?152edk');
src:  url('fonts/icomoon.eot?152edk#iefix') format('embedded-opentype'),
url('fonts/icomoon.ttf?152edk') format('truetype'),
url('fonts/icomoon.woff?152edk') format('woff'),
url('fonts/icomoon.svg?152edk#icomoon') format('svg');
font-weight: normal;
font-style: normal;
}

[class^="icon-"], [class*=" icon-"] {
/* use !important to prevent issues with browser extensions that change fonts */
font-family: 'icomoon' !important;
speak: none;
font-style: normal;
font-weight: normal;
font-variant: normal;
text-transform: none;
line-height: 1;

/* Better Font Rendering =========== */
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}

.icon-add-test:before {
content: "\e900";
}
.icon-cancle-heima:before {
content: "\e901";
}
.icon-你好:before {
content: "\e902";
}
.icon-edit:before {
content: "\e903";
}
.icon-preview:before {
content: "\e904";
}
.icon-share:before {
content: "\e905";
}
.icon-time:before {
content: "\e906";
}

span{
display: block;
width:10px;
height:10px;
}

</style>
</head>
<body>
<span class='icon-add-test'></span>
<div class='icon-你好'></div>
</body>
</html>

生成的自定义图标的目录结构如下图：(fonts文件夹也要带上才能看到哦)

less中的import关键字

使用import 可以将多个less文件进行合并。

在index.less中引入：@import 'base.less';@import 'fon了t.css';这样在index.css中就有base.css和font.css中的样式了。

比较流行的base.css文件：

gitbook导出书籍

安装node.js

使用命令行安装gitbook

windows+r输入cmd回车

npm install -g gitbook -cli

这时会看到一些乱的页面，正常的

安装完毕后再命令行中输入gitbook看到如下页面表示安装成功。

开始导出命令行命令如下

cd到书的文件夹(直接将文件夹拉入即可)

gitbook build即可导出，导出的文件在书的目录下面的_book中

注意:如果安装的是最新的gitbook，那么无法在url使用file:xxx的情况下跳转（为了解决这个问题可以安装老版本的gitbook）

安装老版本：查看版本号-gitbook ls-remote，gitbook fetch 版本号，安装完毕之后可以通过gitbook ls查看安装的版本

导出的时候指定版本号即可：gitbook build --gitbook=版本号

看完有啥不懂的，欢迎留言咨询。

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： 媒体查询左定宽-右自适应布局自定义图标自定义字体 gitbook导出书籍

相关文章推荐

新的分享

章节导航