开发移动端web的一些知识
由于智能机的普及,越来越多网页支持移动端了,那么如何解决适配移动端呢
在这总结一下自己的学习笔记
viewport:虚拟的容器,仅在移动设备有效
<meta name="viewport" content="width=device-width, user-scalable=no,initial-scale=1.0"/>
width=device-width:设置宽度为设备宽度
initial-scale=1.0:初始缩放比例1.0
user-scalable=no:不允许用户自行缩放
在使用viewport布局中,网页中的盒子宽度一般使用百分比设置专家号
点击高亮效果
在移动端默认会出现点击高亮效果,那么如何去除其效果呢
-webkit-tap-highlight-color:transparent;/*清除点击高亮效果*/
如果想加颜色,直接改变transparent
防止盒子宽度溢出
在移动端所有盒子须设置
box-sizing: border-box;
移动web开发和响应式开发的的区别
1、一般在已经有pc端web ,单独开发移动web;针对移动端,开发效率高;只适配移动设备,pad体验不好;代码相当简洁,加载速度快。
2、一般新建的网站,适配各种终端;开发效率低;代码相对复杂,加载速度慢。
常见的几种移动站点布局
- 流式布局
- 媒体查询
- rem自适应
开发移动端web的一些知识的更多相关文章
- 开发移动端web应用, 使用手机自带键盘的搜索按钮
很多时候在移动端的web页面中, 需要使用搜索功能, 然而页面中并没有太多的空间来放置一个像pc端上那样的搜索按钮, 这时候就需要借用手机输入法自带的搜索按钮来实现点击搜索 虽然不是什么大的功能, 但 ...
- 开发移动端web页面click事件失效问题
这两天在做一个WAP页面,在chrome上模拟移动端的时候,都好好的,然而放到手机上测试时, 发现有些点击事件直接无反应,但是有些有反应: 难道是由于我页面上有用到滚动插件,里面的touch事件的pr ...
- 移动端开发demo—移动端web相册(一)
本文主要是介绍开发移动端web相册这样一案例用到的前置知识. 一.移动端样式 移动端更接近手机原生的方式. 如下是一个angular mobile的demo的例子: 移动端demo做成这样的好处: 在 ...
- 移动端 Web 开发前端知识整理
文章来源: http://www.restran.net/2015/05/14/mobile-web-front-end-collections/ 最近整理的移动端 Web 开发前端知识,不定期更新. ...
- 移动端web开发基础概念
最近在了解移动端web开发的相关知识,有些概念总是模糊不清,这次花费了一些时间整体的梳理了一遍. 分辨率 分辨率可以从显示分辨率与图像分辨率两个方向来分类.显示分辨率(屏幕分辨率)是屏幕图像的精密度, ...
- 【移动端 Web】怎么循序渐进地开发一个移动端页面
1. 移动页面开发基础 1.1 像素——什么是像素 像素是 Web 页面布局的基础,那么到底什么才是一个像素呢? 像素:一个像素就是计算机屏幕所能显示一种特定颜色的最小区域.这是像素的概念,实际上,W ...
- 移动端web app开发备忘
近期要做个手机html5的页面,做些知识储备,重要的点记录下来以备兴许. 1.devicePixelRatio:定义设备物理象素和设备独立象素的比例.css中的px能够看作是设备的独立象素.通过dev ...
- Web端即时通讯基础知识补课:一文搞懂跨域的所有问题!
本文原作者: Wizey,作者博客:http://wenshixin.gitee.io,即时通讯网收录时有改动,感谢原作者的无私分享. 1.引言 典型的Web端即时通讯技术应用场景,主要有以下两种形式 ...
- 移动端web开发的一些知识点
整理一下自己平时移动端web开发中遇到的问题,也参考一下前辈的一些总结 1.最常见的要数1像素边框了 因为Retine屏的分辨率始终是普通屏幕的2倍,1px的边框在dpr=2的retina屏下会显示成 ...
随机推荐
- ab压力测试报错: apr_socket_recv: Connection reset by peer (104)
使用ab对网站进行压力测试,开始设置并发500,可以正常使用,当设置并发为1000,则报错: apr_socket_recv: Connection reset by peer (104) 改服务端a ...
- memcache 安装教程
memcached:官网http://memcached.org/ 说明:memcached本身没有Linux版本,网上的windows 版本都是个人开发的. memcached和memcache区别 ...
- Android各层推荐开发书籍及参考资料
Android各层推荐开发书籍及参考资料 转自:http://blog.csdn.net/fancylovejava/article/details/8657058 Android系统按照架构来说一共 ...
- Spring、AOP详解
如何配置AOP查看:Spring.Hello AOP 1.对于拦截规则@Pointcut的介绍: @Pointcut("execution (* cn.raffaello.service.. ...
- Redis简介以及如何在Windows上安装Redis
Redis简介 Redis是一个速度非常快的非关系型内存数据库. Redis提供了Java,C/C++,C#,PHP,JavaScript,Perl,Object-C,Python,Ruby,Erla ...
- Unity CCTween UGUI 动画插件
在这简单的介绍一下 CCTween 动画插件的使用 因为GIF 制作软件不太好(网上随便下载的)所以导致效果不太好,有时间我重新制作一下 这是一下简单的效果 下面介绍怎么使用 首先 先下载 CCTwe ...
- WinForm DataGridView看似刷新的问题
昨天同事winform遇到一个问题, 窗体上有一个时间控件,和一堆文本,下拉控件,时间控件是每秒都在动态走的 窗体下发一个DataGridView 控件显示保存后的数据 保存的数据库是在另一台机器B上 ...
- iOS多线程的基本使用
一.NSThread: 程序就是一段代码,是静态的概念 进程是运行起来的程序,是动态的概念,进程需要占内存空间 线程是进程的基本单位,一个进程至少有一个线程,iOS程序默认有一个主线程,用来显示和操作 ...
- SSH框架整合 日志处理Spring结合 log4j、slf4j
1. 加入log4j和slf4j的jar包 2. web.xml: <context-param> <!--log4j配置地址 --> <param-name>lo ...
- Rectangles
Given two rectangles and the coordinates of two points on the diagonals of each rectangle,you have t ...