media query 是响应式设计的核心，它能够和浏览器进行沟通，告诉浏览器页面如何呈现 @media screen and (max-width:980px){ ... } @media screen and (min-width:980px) and (max-width:1200px){ . ...
分类：
其他好文 时间：
2018-03-04 16:06:45
阅读次数：
153
px：像素是相对于显示器屏幕分辨率而言的相对长度单位。pc端使用px倒也无所谓，可是在移动端，因为手机分辨率种类颇多，不可能一个个去适配，这时px就显得非常无力，所以就要考虑em和rem。 em：继承父级的，假设html的font-size默认为16px，body字体大小定义为50%，那么在body ...
分类：
其他好文 时间：
2018-03-02 23:54:04
阅读次数：
421
meta标签到底做了什么事情 做过移动端适配的小伙伴一定有遇到过这行代码： 但是，很多小伙伴只是感性的认识：噢，我加了这行代码，然后页面的宽度就会跟我的设备宽度一致。然而，这种理解是很片面的。那么，这句话的本质到底是什么呢？ 不急，我们先往下面看，这里先留个悬念。 几个专有名词和单位 这里，我们先来 ...
分类：
移动开发 时间：
2018-02-28 19:48:53
阅读次数：
204
一、媒体查询用法 @media 媒体查询包含一个可选的媒体类型和，满足CSS3规范的条件下，包含零个或多个表达式，这些表达式描述了媒体特征，最终会被解析为true或false。如果媒体查询中指定的媒体类型匹配展示文档所使用的设备类型，并且所有的表达式的值都是true，那么该媒体查询的结果为true. ...
分类：
其他好文 时间：
2018-02-28 01:16:24
阅读次数：
1971
截止目前，国内绝大多数内容为主的网站（知乎，果壳，V2EX，网易新闻等）均使用内容区定宽布局，大多数电商网站（网易考拉，京东，聚美优品）也使用了内容区定宽的布局，也有些网站使用了自适应布局： 天猫 内容区采用媒体查询+定宽，在达到某个断点之后更改内容区的宽度，并把某个内容显示/隐藏。 注意热门市场这 ...
分类：
其他好文 时间：
2018-02-27 14:58:55
阅读次数：
298
一、一个小知识点 1、截取长屏的操作 2、设置默认格式 3、md，sm， xs 4、空格和没有空格的选择器 二、响应式介绍 - 响应式布局是什么？ 同一个网页在不同的终端上呈现不同的布局等- 响应式怎么实现的？ 1. CSS3 media query 媒体查询 2. JS去控制网页的布局和样式等 - ...
分类：
Web程序 时间：
2018-02-20 19:02:21
阅读次数：
274
随着响应式设计模型的诞生，Web网站又要发生翻天腹地的改革浪潮，可能有些人会觉得在国内IE6用户居高不下的情况下，这些新的技术还不会广泛的蔓延下去，那你就错了，如今淘宝，凡客，携程等等公司都已经在大胆的尝试了这项技术，并完美的应用在了自己的网站上了。再不更新知识你就老了。我今天就总结一下响应式设计的 ...
分类：
Web程序 时间：
2018-02-09 15:14:57
阅读次数：
212
由于移动端的特殊性，屏幕的尺寸碎片化严重，要想很好的适配不同的尺寸的设备，需要我们前端开发相比PC端要做一些基层的适配方案。 1. 常见的适配方案 百分比+固定高度布局方案 固定屏幕为理想视口宽度 少许的媒体查询设置字体 水平百分比布局 水平方向部分也可以使用弹性布局 Rem解决方案 Rem的大小取 ...
分类：
移动开发 时间：
2018-02-08 00:21:54
阅读次数：
257
微金所一、媒体查询在响应式开发中使用媒体查询中的screen查询浏览器的宽度来定义不同宽度区间的样式和布局。代码：@mediascreenand(min-width:768px){}@mediascreenand(min-width:992px){}@mediascreenand(min-width:1200px){}或者@media(max-width:767px){}@media(min-wi
分类：
移动开发 时间：
2018-02-06 16:37:53
阅读次数：
200
CSS3媒体查询： 语法： <media_query_list>：<media_query>[,<media_query>] <media_query>：only|not <mediaType> and <expression>[ and <expression>] <expression>：<me ...
分类：
Web程序 时间：
2018-01-27 13:50:23
阅读次数：
1006
