媒体查询 ：即在不同屏幕的客户端下，显示效果不同。因为考虑屏幕大小不同，对布局要求有不同； /*屏幕宽度大于800px*/ @media screen and (min-width: 800px){ .box{ width:200px; height: 300px; background-color ...
分类：
其他好文 时间：
2019-11-28 19:35:10
阅读次数：
101
公司最近做的一个移动端项目从搭框架到前端开发由我独立完成，以前做移动端适配用的媒体查询，这次想用点别的适配方案，然后就采用了vue-cli3.0结合lib-flexible、px2rem实现移动端适配的方案，开发过程中也遇到一些坑，自己选的方案自己填坑吧。以下记录我的项目框架搭建及填坑方案。 搭建可 ...
分类：
移动开发 时间：
2019-11-23 18:26:59
阅读次数：
182
在高分辨率屏幕上，如果用@1X分辨率的图，会模糊。在低分辨率的屏幕上，如果用@2X分辨率的图，图片相对会稍微大一点，浪费网络资源。 补充：css可以通过媒体查询的“device-pixel-ratio”属性来判断。JS的话，可以通过window.devicePixelRatio获得设备像素比，获取物 ...
分类：
其他好文 时间：
2019-11-23 16:20:37
阅读次数：
76
页面自适应 自适应是指页面内容自动适应屏幕大小，实现自适应的方法有多种： 1.简易场景实现自适应：浮动、页面居中、元素宽度不写固定而设置百分比自动匹配大小。这样在页面宽度发生变化时，能利用以上特性实现简易的自适应效果。2.如果实际开发中有复杂场景的需求，一般通过编写多套CSS代码，然后用媒体查询技术 ...
分类：
其他好文 时间：
2019-11-17 18:06:27
阅读次数：
108
适配方案2 更简洁更高效的rem适配方案flexible.js 手机淘宝团队出的简介高效移动端适配库 我们再也不需要在写不同屏幕的媒体查询，因为里面js做了处理 它的原理是把当前设备划分为10等份，但是不同设备下，比例还是一致的。 我们要做的，就是确定好我们当前设备的html文字大小就可以了 比如当 ...
分类：
移动开发 时间：
2019-11-16 21:34:48
阅读次数：
138
原文链接：http://caibaojian.com/mobile-responsive-example.html 固定一个某些宽度，使用一个模式，加上少许的媒体查询方案 使用flexbox解决方案 使用百分比加媒体查询 使用rem 1. 简单问题简单解决 我觉得有些web app并一定很复杂，比如 ...
分类：
移动开发 时间：
2019-11-09 23:23:00
阅读次数：
120
1. 响应式开发原理：使用媒体查询针对不同宽度的设备进行布局和样式的设置，从而适配不同设备的目的。 超小屏幕（手机）：<768px 小屏设备（平板）：>=768 ~ < 992px 中等屏幕（桌面显示器）：>= 992px ~ < 1200px 宽屏设备（大桌面显示器）：>= 1200px 2. 响 ...
分类：
其他好文 时间：
2019-11-04 13:56:38
阅读次数：
84
1. rem 基础 rem 是一个相对单位，类似于 em ，em 是父元素字体大小。 em 是相对于父元素 的字体大小来说的 rem 是相对于 html 元素 字体大小来说的 rem 优点 就是可以通过修改 html 里面的文字大小来改变页面中元素的大小可以整体控制 比如：根元素（html ）设置的 ...
分类：
其他好文 时间：
2019-11-02 19:51:00
阅读次数：
103
老版常规做法 方案一：Meida Queries媒体查询 meida queries 主要是通过查询设备的宽度来执行不同的 css 代码，最终达到界面的配置。核心语法是： 需要添加meta设置 width=device-width ：表示宽度是设备屏幕的宽度 initial-scale=1.0：表示 ...
分类：
移动开发 时间：
2019-10-31 16:32:36
阅读次数：
101
