由于智能机的普及，越来越多网页支持移动端了，那么如何解决适配移动端呢

在这总结一下自己的学习笔记

  • 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、一般新建的网站，适配各种终端；开发效率低；代码相对复杂，加载速度慢。

  • 常见的几种移动站点布局

  1. 流式布局
  2. 媒体查询
  3. rem自适应

开发移动端web的一些知识的更多相关文章

  1. 开发移动端web应用, 使用手机自带键盘的搜索按钮

    很多时候在移动端的web页面中, 需要使用搜索功能, 然而页面中并没有太多的空间来放置一个像pc端上那样的搜索按钮, 这时候就需要借用手机输入法自带的搜索按钮来实现点击搜索 虽然不是什么大的功能, 但 ...

  2. 开发移动端web页面click事件失效问题

    这两天在做一个WAP页面,在chrome上模拟移动端的时候,都好好的,然而放到手机上测试时, 发现有些点击事件直接无反应,但是有些有反应: 难道是由于我页面上有用到滚动插件,里面的touch事件的pr ...

  3. 移动端开发demo—移动端web相册（一）

    本文主要是介绍开发移动端web相册这样一案例用到的前置知识. 一.移动端样式 移动端更接近手机原生的方式. 如下是一个angular mobile的demo的例子: 移动端demo做成这样的好处: 在 ...

  4. 移动端 Web 开发前端知识整理

    文章来源: http://www.restran.net/2015/05/14/mobile-web-front-end-collections/ 最近整理的移动端 Web 开发前端知识,不定期更新. ...

  5. 移动端web开发基础概念

    最近在了解移动端web开发的相关知识,有些概念总是模糊不清,这次花费了一些时间整体的梳理了一遍. 分辨率 分辨率可以从显示分辨率与图像分辨率两个方向来分类.显示分辨率(屏幕分辨率)是屏幕图像的精密度, ...

  6. 【移动端 Web】怎么循序渐进地开发一个移动端页面

    1. 移动页面开发基础 1.1 像素——什么是像素 像素是 Web 页面布局的基础,那么到底什么才是一个像素呢? 像素:一个像素就是计算机屏幕所能显示一种特定颜色的最小区域.这是像素的概念,实际上,W ...

  7. 移动端web app开发备忘

    近期要做个手机html5的页面,做些知识储备,重要的点记录下来以备兴许. 1.devicePixelRatio:定义设备物理象素和设备独立象素的比例.css中的px能够看作是设备的独立象素.通过dev ...

  8. Web端即时通讯基础知识补课：一文搞懂跨域的所有问题！

    本文原作者: Wizey,作者博客:http://wenshixin.gitee.io,即时通讯网收录时有改动,感谢原作者的无私分享. 1.引言 典型的Web端即时通讯技术应用场景,主要有以下两种形式 ...

  9. 移动端web开发的一些知识点

    整理一下自己平时移动端web开发中遇到的问题,也参考一下前辈的一些总结 1.最常见的要数1像素边框了 因为Retine屏的分辨率始终是普通屏幕的2倍,1px的边框在dpr=2的retina屏下会显示成 ...

随机推荐

  1. reids客户端 redis-cli用法

    Redis提供了丰富的命令(command)对数据库和各种数据类型进行操作,这些command可以在Linux终端使用.在编程时,比如使用Redis 的Java语言包,这些命令都有对应的方法.下面将R ...

  2. RHEL安装时加载第三方raid驱动

    IBM x3650 M3服务器做完RAID之后,不能直接的安装Linux系统,会报出没有硬盘的错误 过程如下: 1.到IBM的官方网站下载device drive 下载后的为:ibm_dd_sraid ...

  3. oracle的常见问题与解决

    刚接触oracle,在学习过程中遇到了很多的问题,本文章将会收藏我遇到的问题及如何解决. 错误一:ORA-28009:connection as sys should be as sysdba解决方法 ...

  4. poj--1517

    n从0取到9,一个for循环,n++,n=0,n<=9 n=4,求1/4!+1/3!+1/2!+1/1!+1/0! 需要一个for循环,i=n,i>=0,i-- sum+=factoria ...

  5. o​r​a​l​c​e​ ​D​B​A​ ​培​训_lesson06

    控制文件 -小型二进制文件 -定义物理数据库的当前状态 -丢失控制文件须要修复 -维护数据库的完整性 -要求: 1.在启动数据库时处于mount状态 2.可以操作数据库 -仅仅链接至一个数据库 -最初 ...

  6. mysql——获取所有table名和table字段名。

    获取database所有table名: (参考:http://stackoverflow.com/questions/2780284/how-to-get-all-table-names-from-a ...

  7. js获取input file完整路径的方法

    function getPath(){  //判断浏览器  var Sys = {};  var obj = document.getElementById("headImg"); ...

  8. springFramework 源码学习之源码下载与编译

    1.源码下载 Spring已经将源码从svn迁移到了git.对于习惯了svn的人来说依然可以svn checkout,最好checkout到英文路径下,本人中文路径编译不过,具体原因不明,路径: ht ...

  9. 微博发布效果jq版

    大家都看过新浪微博的发状态功能,我模拟了一下类似的效果,包括发布时间,删除效果等.代码如下: <!DOCTYPE HTML> <html> <head> <m ...

  10. iOS下移除按钮原生样式

    按钮样式,在 Android 手机浏览器中显示正常,但在 iOS Safari 浏览器中会看到按钮显示为圆角样式,设置 border-radius:0; 也不好使. 这是因为iPhone.iPad 设 ...