做移动端的前端，接到的需求中肯定离不开响应式布局，那么到底什么是响应式布局，其实现的原理在哪，我个人的看法如下： 1.目的：在项目中你会遇到不同的终端，由于终端分辨率不同，所以你要想让用户体验更好，就必要让你的页面能够适配多个终端 2.由于响应式布局多是针对移动端，所以首先要在<head>标签中添加 ...
分类：
其他好文 时间：
2016-10-27 23:31:57
阅读次数：
322
/* iPhone 4 and 4S */ /* Portrait and Landscape */ @media only screen and (min-device-width: 320px) and (max-device-width: 480px) and (-webkit-min-dev ...
分类：
移动开发 时间：
2016-10-27 12:29:58
阅读次数：
291
第一章，控制html字体大小 1.1使用媒体查询，不同分辨率设置不同的html的font-size @(min-width:320px){ html{font-size:10px;} } @(min-width:360px){ html{font-size:11.25px;} } @(min-wid ...
分类：
移动开发 时间：
2016-10-23 20:21:26
阅读次数：
203
响应式布局 响应式布局的基本结构为： 栅格系统通过定义容器的大小，然后将容器分为12等份调整内外边距结合媒体查询来实现 在栅格系统中可以组合class来实现不同分辨率的适配 class="container"是最外层的容器提供了对齐方式 class="row"定义一个列容器 class="col-x ...
分类：
其他好文 时间：
2016-10-21 01:03:12
阅读次数：
140
CSS媒体查询 媒体查询包含了一个媒体类型和至少一个使用如高度、宽度和颜色等媒体属性来限制样式表范围的表达式。CSS3加入的媒体查询使得无需修改内容便可以使样式应用于某些特定的设备范围。 语法 媒体查询包含了一个媒体类型和如css3规范中描述的包含了一个或多个表达式的媒体属性，这些媒体属性会被解析成 ...
分类：
Web程序 时间：
2016-10-17 20:08:01
阅读次数：
277
一.设置Meta标签 通过这个标签属性，我们可以很方便的在不同的设备下实现丰富的界面，特别是移动设备，将会运用更加的广泛。首先我们在使用Media的时候需要先设置下面这段代码，来兼容移动设备的展示效果： <meta name="viewport" content="width=device-widt ...
分类：
其他好文 时间：
2016-10-15 02:18:22
阅读次数：
116
bootstrap css响应式布局 1.自适应（%） 2.@media媒体查询 3.1em=16px→浏览器的默认值（相对body，会继承） 4.1rem=16px→浏览器默认值→只针对app端而且只针对字体大小（相对html值，不会继承） css布局 1.@media sreen and（min ...
分类：
其他好文 时间：
2016-10-08 02:00:55
阅读次数：
94
css响应式布局{手机（app）、 平板 pc、（桌面、电脑）}国外（自适应响应式布局）中国（手机和电脑两种） @midle媒体查询，通过改变屏幕尺寸screen（宽度width）来达到页面的自适应采用继承的width（100%）的方式em是相对长度单位，相对于当前对象内文本的字体IE8及更新早版本 ...
分类：
其他好文 时间：
2016-10-07 20:36:07
阅读次数：
129
(响应式PC端媒体查询)电脑屏幕分辨率尺寸大全 (响应式PC端媒体查询)电脑屏幕分辨率尺寸大全 时间：2015-08-17 16:50:40 阅读：3961 评论：0 收藏：0 [点我收藏+] 标签：style 代码 si sp bs im c res on PC端 按屏幕宽度大小排序（主流的用橙色 ...
分类：
其他好文 时间：
2016-09-30 12:27:22
阅读次数：
193
不喜勿喷，本人学的少，以下就说说我目前习惯用的一些框架、： 对于web端: css源生代码直接写定宽高 css源生代码响应式布局 -- @media bootstrap--移动端优先 -- 用框架 兼容性 还原布局 App:不同的屏幕尺寸： 一、css源生代码响应式布局 采用@media媒体查询，利 ...
分类：
其他好文 时间：
2016-09-26 08:34:15
阅读次数：
158
