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

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

  • 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. java 为pdf添加水印图片

    首先需要引入两个Jar包分别是:iTextAsian.jar .itext-2.1.7.jar  可以去  http://download.csdn.net/detail/work201003/922 ...

  2. Mysql两种存储引擎的优缺点

    MyISAM引擎是一种非事务性的引擎,提供高速存储和检索,以及全文搜索能力,适合数据仓库等查询频繁的应用.MyISAM中,一个table实际保存为三个文件,.frm存储表定义,.MYD存储数据,.MY ...

  3. GCDAsyncUdpSocket的使用

    tips: 要注意服务器端口与客户端端口的区别,如果客户端绑定的是服务器的端口,那么服务器发送的消息就会一直发送给服务器.

  4. 打包ipa分发给测试机安装步骤

    1.确定可以打包的Mac电脑,即该Mac电脑已经具备可以打包的权限. 需要上传一份Mac电脑的描述文件,即csr文件. 2.创建bundle id 3.添加测试设备 4.生成证明描述文件 5.Xcod ...

  5. Unable to boot : please use a kernel appropriate for your cpu

    假设你在virtualbox里得到这种提示信息: Unable to boot - please use a kernel appropriate for your CPU 以下的解决的方法,能够帮你 ...

  6. oracle 物化视图导入导出报错

    1.exp导出报EXP-00008: 遇到 ORACLE 错误 1455,ORA-01455: 转换列溢出整数数据类型 2.imp导入报.注: 表包括 ROWID 列, 其值可能已废弃,不是警告也不是 ...

  7. wcf系列学习5天速成——第三天 事务的使用

    今天是速成的第三天,再分享一下WCF中比较常用的一种技术,也就是”事务“. 在B2B的项目中,一般用户注册后,就有一个属于自己的店铺,此时,我们就要插入两张表, User和Shop表. 当然,要么插入 ...

  8. vue+webpack一些知识

    使用mac的用户需要获取权限才可以使用npm install指令 设置node目录的权限指令 sudo chmod -R 777 /usr/local/lib/node_modules/ 大家都知道国 ...

  9. C# 弹出窗口查看图片以及上传图片

    private void ShowSelectedPicture(string path) { FileStream fs = File.OpenRead(path); //OpenRead ; fi ...

  10. JS 精粹（一）

    先说说JS是容易被误解的语言的观点.从名字上来看,"Java"这似乎暗示着这门语言与Java的关系:好像这门语言是Java的子集,或比Java弱.但实际与Java并无关系,如果说非 ...