媒体查询，移动端常见布局以及其他
2019独角兽企业重金招聘Python工程师标准>>> 
文章图片
媒体查询
- 如果使用过了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，我们经常会看到有左边固定导航栏，右边上下滑动内容栏的布局，这也是最常见的布局，我们暂时先不要考虑那么复杂，先可以想一下怎样才能实现这种布局呢？
Document
.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;
}
padding方式实现
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.
方式二：浮动
Document
.container{
border: 1px solid #0094ff;
}
.left{
width: 100px;
height: 100px;
border: 1px solid #0094ff;
float: left;
}
.right{
overflow: hidden;
}
使用浮动的方式实现布局
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.
其他方式
其实还有很多方式(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格式），我们需要将他转化为字体图标。进行字体图标转换：字体图标转换
- 自定义字体图标：
Document
@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;
}
- 生成的自定义图标的目录结构如下图：(fonts文件夹也要带上才能看到哦)
文章图片
less中的import关键字
- 使用import 可以将多个less文件进行合并。
- 在index.less中引入：@import 'base.less'; @import 'fon了t.css'; 这样在index.css中就有base.css和font.css中的样式了。
- 比较流行的base.css文件：
- 安装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=版本号
【媒体查询，移动端常见布局以及其他】转载于:https://my.oschina.net/yxmBetter/blog/872642
推荐阅读
- 关于QueryWrapper|关于QueryWrapper,实现MybatisPlus多表关联查询方式
- mybatisplus如何在xml的连表查询中使用queryWrapper
- mybatisplus|mybatisplus where QueryWrapper加括号嵌套查询方式
- MybatisPlus使用queryWrapper如何实现复杂查询
- 人如果没梦想，和咸鱼有什么区别（自媒体时代把握住就能咸鱼翻身）
- 移动端h5调试方法
- 自媒体形势分析
- 诱惑的世界
- 新媒体时代，你需要掌握的必备技能
- 数据库|SQL行转列方式优化查询性能实践