移动端WEB开发之响应式布局 1. 响应式开发原理 1.1 响应式开发原理 就是使用媒体查询针对不同宽度的设备进行布局和样式的设置，从而适配不同设备的目的。 设备的划分情况： + 小于768的为超小屏幕（手机） + 768~992之间的为小屏设备（平板） + 992~1200的中等屏幕（桌面显示器） ...
分类：
移动开发 时间：
2019-12-31 21:33:29
阅读次数：
85
1.移动端单独制作 + 流式布局（百分比布局） + flex 弹性布局（强烈推荐） + less+rem+媒体查询布局 + 混合布局 2.响应式 + 媒体查询 + bootstarp 流式布局： 流式布局，就是百分比布局，也称非固定像素布局。 通过盒子的宽度设置成百分比来根据屏幕的宽度来进行伸缩，不 ...
分类：
移动开发 时间：
2019-12-31 21:23:09
阅读次数：
98
常见布局实现： 作者：Sweet_KK 链接：https://juejin.im/post/5aa252ac518825558001d5de 来源：掘金 一、水平居中 文本/行内元素/行内块元素居中 ==text align== 只控制行内内容（文字、行内元素、行内块元素）如何相对于他的块父元素对齐 ...
分类：
其他好文 时间：
2019-12-27 21:53:44
阅读次数：
102
在上例中，我们使用Media Queries模块来根据3种不同尺寸的窗口使用3种不同的样式。通过不同的媒体类型和条件定义样式表规则，媒体查询让CSS可以更精确地作用于不同的媒体类型和同一媒体的不同条件。媒体查询的大部分媒体特性都接受min和max用于表达“大于或等于”和“小与或等于”。例如，widt ...
分类：
Web程序 时间：
2019-12-19 09:25:29
阅读次数：
81
在iPhone系列和iPod Touch中使用的是Safari浏览器，它支持前面介绍的媒体查询表达式。例如，使用iPhone 320px×480px的分辨率去访问我们前面的布局示例，却无法得到我们想看到的结果，并不是从上到下排列显示，而是和计算机显示器访问的布局相同。为什么会这样？因为在iPhone ...
分类：
移动开发 时间：
2019-12-19 09:17:12
阅读次数：
84
摘自：https://www.cnblogs.com/huanzi-qch/p/12053799.html PC端、移动端页面适配方案 前言 页面自适应PC端、移动端大体上可以分为两种： 1、在同一个页面进行自适应布局，通常使用CSS3 @media 媒体查询器实现 2、两套页面，在后端进行统一适配 ...
分类：
移动开发 时间：
2019-12-17 14:52:17
阅读次数：
120
前言 页面自适应PC端、移动端大体上可以分为两种： 1、在同一个页面进行自适应布局，通常使用CSS3 @media 媒体查询器实现 2、两套页面，在后端进行统一适配，根据不同的浏览器UA返回对应的页面 本文记录在java后端进行PC端、移动端页面适配的方案 工程结构 想要实现后端统一适配，首先要规范 ...
分类：
移动开发 时间：
2019-12-17 13:04:02
阅读次数：
321
下面为我平时学习所看的高质量文章的汇总，以便后面的查阅及总结 js如何使用媒体查询 Array数组对象的forEach、map、filter、reduce 知道这20个正则表达式，能让你少写1,000行代码 Ajax之同步请求和异步请求的区别 js中精度问题以及解决方案 ECMAScript 6 入 ...
分类：
编程语言 时间：
2019-12-08 17:34:51
阅读次数：
83
百分比布局+媒体查询 首先通过媒体查询确认container的宽度，每个col-xx-xx都是通过百分比定义的，屏幕尺寸变化了，container就变化了，col自然就变了 Bootstrap的官方解释：Bootstrap提供了一套响应式、移动设备优先的流式栅格系统，随着屏幕或视口（viewport ...
分类：
其他好文 时间：
2019-12-08 17:26:52
阅读次数：
91
响应式开发 1. 响应式开发原理 使用媒体查询针对不同宽度的设备进行布局和样式的设置，从而适配不同设备的目的 | 设备划分 | 尺寸区间 | | | | | 超小屏幕（手机） | =768px~=992px~=1200px | 2. 响应式布局容器 响应式需要一个父级作为布局容器，来配合子级元素来实 ...
分类：
其他好文 时间：
2019-11-29 21:01:47
阅读次数：
101
