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

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

  • 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. C语言入门（20）——使用VC2013对C语言进行调试

    软件调试过程中,有时会一些逻辑和内存访问方面的问题,如果没有调试器的帮助,找出何处代码导致这块内存被更改是一件非常麻烦的事情.恰当运用数据断点可以快速帮我们定位问题的所在. 1.VC的调试快捷键 F5 ...

  2. ubuntu texlive 中文的配置方法

    \documentclass[12pt]{article} \usepackage{CJKutf8} \usepackage{indentfirst}%设置第一段缩进,英语中从第二段才有缩进 \use ...

  3. C语言对象化编程

    以下为一个引子: C中struct的函数实现,只能用函数指针成员. C结构体内不能有函数的代码,但可以有函数的指针. C/C code Code highlighting produced by Ac ...

  4. 利用PowerDesigner15在win7系统下对MySQL 进行反向project（二）

    利用PowerDesigner15在win7系统下对MySQL 进行反向project 1.打开PowerDesigner,建立新模型.选择Physical Data Model中的Physical ...

  5. Django学习笔记(一)

    之前没有接触过django,甚至python也是最近才刚刚着手学习,可以说是零基础.要学习一门新技术,官方文档自然是首选的入门教程.开发环境:python2.7+django1.7+win 1.首先, ...

  6. There is no result type defined for type 'json' mapped with name 'success'. Did you mean 'json'?

    错误信息: 严重: Exception starting filter struts2 Unable to load configuration. - action - file:/C:/Users/ ...

  7. c++中的const参数，const变量，const指针，const对象，以及const成员函数

    const 是constant 的缩写,“恒定不变”的意思.被const 修饰的东西都受到强制保护,可以预防意外的变动,能提高程序的健壮性.所以很多C++程序设计书籍建议:“Use const whe ...

  8. C++学习笔录2

    1.如果一个类要成为基类,那么它的成员变量声明成受保护的变量,既用关键字protected修饰. 2.处理共同继承产生的二义性:采用虚继承方式,当出现两个相同的成员时,编译器会自动删除其中一个.其方法 ...

  9. leetcode Count and Say python

    class Solution(object): def countAndSay(self, n): """ :type n: int :rtype: str " ...

  10. PHP中cURL错误号对照[转]

    PHP cURL curl_errno 在php程序编写中,使用curl函数库的几率还是挺高的,如curl_init().curl_setopt().curl_exec().curl_errno()等 ...