首先 我是借用了yo框架的border和他的媒体查询组合 这两个分别是在yo>lib>core>classes>_border.scss(用来获取yo框架封装的border) yo>lib>core>variables.scss(用来获取媒体查询的规则) 然后根据stylus语法修改拿到的borde ...
分类：
移动开发 时间：
2018-11-03 02:18:09
阅读次数：
212
我们都知道对于前端pc版本的适配是一个难题，大部分都是做的媒体查询。但是有时间公司不要媒体查询 就是需要不管多大的屏幕都是满屏显示。我就在考虑为啥不用rem给pc端做个适配。 我是基于设计图是1920的做的简单的js适配。 把这个js脚本放到根目录下，也就是index.html中。我们所测的尺寸去除 ...
分类：
其他好文 时间：
2018-11-01 12:02:27
阅读次数：
229
一、Bootstrap（v3.3.7） 官网：http://www.bootcss.com/ 优点： 1）栅格系统（结构） 可以根据用户屏幕尺寸调整页面，使其在各个尺寸上都表现良好。栅格系统的本质就是通过CSS3的媒体查询实现的，Bootstrap将屏幕尺寸分为四类，超小屏幕<768px，小屏幕 平 ...
分类：
其他好文 时间：
2018-10-25 12:12:39
阅读次数：
232
ie8不支持媒体查询和h5特性,兼容ie8以上的代码： ...
分类：
其他好文 时间：
2018-10-14 20:45:00
阅读次数：
133
2010年由Eson Machel提出。 一、概念： 是一个设计理念，采用多项技术的综合体。（针对不同的终端，采取不同的布局样式） 弹性布局的缺点： 当宽度小到一定程度，图片会发生裁剪，图片会不清晰，优化程度有限 二、响应式运用的三大技术： 弹性布局 （流动网格） 弹性图片 媒体查询 三、响应式网 ...
分类：
Web程序 时间：
2018-10-14 01:57:44
阅读次数：
201
媒体查询开始于css2 css3加强来媒体查询 主要包含两个方面：媒体类型 函数 @media all and (min-width:800px) and (orientation:landscape) { ...//样式 } 解释：如果and后面的表达式为true，执行花括号代码里面的样式 all ...
分类：
其他好文 时间：
2018-10-14 01:46:33
阅读次数：
218
背景 移动端响应式布局开发主要方案有： 基于rem开发 基于媒体查询 基于弹性盒 基础概念 在讨论响应式布局知识前，先了解下移动端常用基础概念。 逻辑像素(CSS pixels) 浏览器使用的抽象单位，主要用来在网页上绘制内容；通常在我们实际开发中涉及到的CSS单位px都是指逻辑像素。 设备像素或物 ...
分类：
移动开发 时间：
2018-10-13 14:37:31
阅读次数：
188
一、直接写在媒体查询里 @media 媒体类型and （媒体特性）{你的样式} 二、链接css ...
分类：
其他好文 时间：
2018-10-11 01:40:33
阅读次数：
126
一、css3的@media媒体查询 1、定义和使用 @media 可以针对不同的屏幕尺寸设置不同的样式，特别是如果你需要开发响应式的页面，@media 是非常有用的。当你重置浏览器大小的过程中，页面也会根据浏览器的宽度和高度重新渲染页面，这对调试来说是一个极大的便利。 语法： 参数解释： media ...
分类：
移动开发 时间：
2018-10-09 19:00:57
阅读次数：
223
总结一下，rem实现自适应：用rem代替px，配合媒体查询设置font-size 首先，px是死的。若一律用px，那就会大的显得小，小的屏幕显得大。其次，rem是活的，通过设置字体大小可以引起rem的改变，为什么？ ①因为rem和px有一个对应关系，因为对应关系是固定的，举个栗子：5对应15,15对 ...
分类：
其他好文 时间：
2018-10-08 13:01:07
阅读次数：
161
