随笔分类 - 移动端
摘要：概述 这篇文章是基于网易的移动端屏幕适配方案而来的。 （1）思考 在移动端开发中，对于页面屏幕适配要解决哪些问题？ 对于不同的dpr，图片会有模糊的情况，怎么适配？ 对于不同的屏幕宽度，怎么适配？ 对于不同的内容：容器，文字和图片，怎么适配？ 对于移动适配，我个人希望达到的效果是，对于不同的屏幕，在
阅读全文
摘要：flexible.js (750px) 实现步骤： 1：先去掉禁止用户缩放的meta标签 2：在页面中导入flexible.js <script src=""></script> 3:量出header的height为88px 4:88px / 100 == 0.88rem;
阅读全文
摘要：上一回说到了媒体查询结合rem做移动端布局，步骤如下 首先设置媒体查询，确定html中font-size值的变化 @media all and (max-width:320px){ html{font-size:12px;} } @media all and (min-width:321px) an
阅读全文
摘要：第一步：先写好重置的样式。直接复制粘贴即可 @media all and (max-width: 320px){ html{ font-size: 12px; } } @media all and (min-width: 321px) and (max-width: 375px){ html{ fo
阅读全文
摘要：移动端媒体查询的一些尺寸参考 /*iphone4 4s*/ @media only screen and (device-height :480px) and (-webkit-device-pixel-ratio:2){ /* Styles */ } @media screen and (min-
阅读全文
摘要：PC端 按屏幕宽度大小排序（主流的用橙色标明） 分辨率 比例 | 设备尺寸 1024*500 （8.9寸） 1024*768 （比例4：3 | 10.4寸、12.1寸、14.1寸、15寸; ） 1280*800（16：10 |15.4寸） 1280*1024(比例：5：4 | 14.1寸、15.0寸
阅读全文
摘要：Media Queries能在不同的条件下使用不同的样式，使页面在不同在终端设备下达到不同的渲染效果。前面简单的介绍了Media Queries如何引用到项目中，但Media Queries有其自己的使用规则。具体来说,Media Queries的使用方法如下。 @media 媒体类型and （媒体
阅读全文
摘要：1. 媒体查询语法 <!-- link元素中的CSS媒体查询 --> <link rel="stylesheet" media="(max-width: 800px)" href="example.css" /> <!-- 样式表中的CSS媒体查询 --> <style> @media (max-w
阅读全文
摘要：随着HTML5的出现，input元素新增了多种类型，用以接受各种类型的用户输入。其中，button、checkbox、file、hidden、image、password、radio、reset、submit、text这10个是传统的输入控件，新增的有color、date、datetime、date
阅读全文
摘要：前端必备自定义滚动库——iScroll iScroll是什么 很多场景，如果使用body的滚动会很不方便，这时候，就会使用某个元素的局部滚动，恶心的事情就会发生了。 pc端web，windows系统的浏览器会出现丑陋的滚动条。(其实也有最新的css样式可以解决，兼容性欠佳) 手机移动端，ios浏览器
阅读全文
摘要：IScroll.js插件是兼容所有移动端滚动条事件的插件，在某些安卓机中，我们无法通过overflo:scroll这个css属性来出现滚动条；它也可以非常好的在一个容器元素中处理滚动; 注意 在使用IScroll.js必须要有3层元素嵌套，如： <div class="food-left"> <ul
阅读全文
摘要：首先了解下移动web带来的问题 设备更新换代快——低端机遗留下问题、高端机带来新挑战 浏览器厂商不统一——兼容问题多 网络更复杂——弱网络，页面打开慢 低端机性能差——页面操作卡顿 HTML5新技术多——学习成本不低 未知问题——坑多 面对这些问题，一开始我们只能在未知中试错，知道错误的方案才能更容
阅读全文
摘要：1.input placeholder问题 在chrome 模拟移动端调试时［上图］，显示的非常正常，但是在真机上［下图］，placeholder里面的内容明显靠上，非常的不美观 在国外网站，对这个属性的兼容性处理，那就是不要设计input的line-height或者设置line-height为no
阅读全文
摘要：上面动图是实现的效果。 全程无需重新加载整个页面，只需要上下拉即可刷新数据！ index.html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>上拉加载</title> <meta name="viewp
阅读全文
摘要：下拉刷新实现原理 实现下拉刷新主要分为三步： 监听原生touchstart事件，记录其初始位置的值，e.touches[0].pageY； 监听原生touchmove事件，记录并计算当前滑动的位置值与初始位置值的差值，大于某个临界值时，显示下拉刷新头，并将页面的overflow属性，设置为false
阅读全文
摘要：点击样式闪动 Q: 当你点击一个链接或者通过Javascript定义的可点击元素的时候，它就会出现一个半透明的灰色背景。A:根本原因是-webkit-tap-highlight-color，这个属性是用于设定元素在移动设备（如Adnroid、iOS）上被触发点击事件时，响应的背景框的颜色。建议写在样
阅读全文
摘要：最近一直在整理一些做移动端时遇到的问题，现在把他们列在一起，方便收藏查找： 1、关闭iOS键盘首字母自动大写 IOS的机子，默认英文输入法状态下，首字母是自动大写的，有时候挺烦人的。 我们写页面的时候有没有办法把这个自动大写关闭呢？autocapitalize的属性可以实现： 在iOS中，默认情况下
阅读全文
摘要：1.简介 随着移动端的愈加火爆，目前很多HTML5的框架都在支持移动方向，比如：Vue.js，zepto.js，React Native等等。 Zepto是一个轻量级的针对现代高级浏览器的JavaScript 库， 它与jquery 有着类似的api。 如果你会用 jquery，那么你也会用 zep
阅读全文
摘要：安卓浏览器看背景图片，有些设备会模糊因为手机分辨率太小，如果按照分辨率来显示网页，字会非常小，安卓手机devicePixoRadio比较乱，有1.5的，有2的也有3的。想让图片在手机里显示更为清晰，必须使用2x的背景图来代替img标签（一般情况下都是2倍的），或者指定background-size:
阅读全文
摘要：解决方法如下 项目方案： 在最外侧添加样式操作 .
阅读全文
