有关移动端的开发

移动端开发:
首先设备大致分为4种:手机端: <768px
ipad端:769 - 991px
pc端:992 - 1200px
超大屏幕:>1200px

响应式布局:Ethan Marcotte在2010年5月份提出的概念,意思是一个网站能够兼容多个终端,而不是
为每个终端做一个特定的版本。这个概念是为解决移动互联网浏览而诞生的。
优点: 面对不同分辨率设备灵活性强
能够快捷解决多设备显示适应问题
缺点: 兼容各种设备工作量大,效率低下
代码累赘,会出现隐藏无用的元素,加载时间加长
其实这是一种折中性质的设计解决方案,多方面因素影响而达不到最佳效果
一定程度上改变了网站原有的布局结构,会出现用户混淆的情况
用法:@media 在css中添加
例:手机端@media screen and (max-width:767px){}
平板端@media screen and (min-width: 769px) and (max-width: 999px) {}
电脑端@media screen and (min-width: 1000px){}
建议:宽度设置100%自适应,网页头部、尾部高度格局都不变,其余自适应。

时间: 2024-08-04 19:16:59

有关移动端的开发的相关文章

移动端网页开发三(纠结适配的那些年)

前面两篇文章介绍了移动端网页开发所要具备的基础知识. 今天着重来讲解移动端的适配方案. 做PC端页面的工程师聊的最多的是兼容,这是因为浏览器之间的差异引起的.而移动端基本是没有兼容问题的,全是css3,简直不要太开心. 但是最明显的是适配问题. 什么是适配呢?做PC页面的时候,我们按照设计图的尺寸来就好,这个侧边栏200px,那个按钮50px.可是,当我们开始做移动端页面的时候,设计师给了一份640px的设计图.那么我们如何把这份设计图实现在各个手机上的过程就是适配. 我所接触过的适配方法,目前

移动端 h5开发相关内容总结——CSS篇

移动端 h5开发相关内容总结——CSS篇 标签: css移动 2016-01-06 15:59 5536人阅读 评论(3) 收藏 举报  分类: HTML+CSS(17)  版权声明:本文为博主原创文章,未经博主允许不得转载. 目录(?)[+] 1.移动端开发视窗口的添加 h5端开发下面这段话是必须配置的 <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=n

安卓端与开发板通信

安卓端与开发板通信 1.由于我们本实验使用到的是串口2,,即串口2给wifi核心板使用,改变跳线帽,让原来串口2是提供给zigbee使用的,改为给wifi使用. 2.添加ser2net应用程序 上一次我们成功的让驱动程序支持了串口 2,并且做了简单的测试.接下来, 我们就为串口 2 添加一个应用程序,从而实现 Wi-Fi 串口 # cd /openwrt/trunk/ # make menuconfig Network -> ser2net 保存退出 # make V=99 3.烧录固件,进入系

移动端页面开发

移动端页面开发 移动客户端的开发类型(站在前端立场上来说),主要是三种:Native App(原生APP),也就是完全使用移动设备系统语言写的客户端,iPhone iPad就是纯Object-C,安卓就是纯JAVA, 是性能最棒的开发方式,但灵活性不好.Web App, 就是在移动浏览器里打开的,纯HTML+CSS+JS,说白了就是个网页,只不过非常的富应用,比如手机浏览器访问的GMAIL.就是在浏览器里打开的页面.IOS支持可以在桌面创建访问的快捷方式,但是说到底还是打开Safari跑.而且对

移动端Web开发调试之Chrome远程调试(Remote Debugging)

本篇主要说一下Chrome RemoteDebugging 的方法,之前也遇到一些坑,自己总结了一些经验,分享如下. Chrome DevTools调试移动设备Brower Page Tabs/WebViews 安卓远程调试目前支持所有操作系统(Windows,Mac, Linux, and Chrome OS.)中调试,支持: ● 调试站点的页面 ● 调试安卓原生App中的WebView ● 实时将安卓设备的屏幕图像同步显示到开发机器. ● 通过端口转发(port forwarding)与虚拟

移动端Web开发注意点

不用考虑浏览器兼容性 移动端开发主要对象是手持设备,其中绝大部分是IOS和Android系统,so,在开发此类页面时不必纠结IE和其他一些2B浏览器的兼容性,webkit是本次开发重点. 当然,不同版本的Android是存在一些问题的,还有就是不同浏览器的版本也存在一些差别,IOS在这方面表现甚好. 所以在开发时我们只需使用Chrome进行调试即可,话说Chrome的开发者工具也是灰常不错的. 丰富的页面Meta 控制显示区域各种属性: <meta content="width=devic

移动端web开发常见问题

上一篇总结了一些有关html5和css3的面试题,这一篇是有关于移动端web开发的常见问题,希望一样对你有一些帮助. Meta相关 1. 添加到主屏后的标题(IOS) <meta name="apple-mobile-web-app-title" content="标题"> 2. 启用 WebApp 全屏模式(IOS) 当网站添加到主屏幕后再点击进行启动时,可隐藏地址栏(从浏览器跳转或输入链接进入并没有此效果) <meta name="a

移动端webapp开发必备知识

移动端webapp开发必备知识 移动设备的用户越来越多,每天android手机的激活量都已经超过130万台,所以我们面向移动终端的WebAPP也开始跟进了.本文主要介绍webapp的开发与调试的相关知识和经验,以及给出几种可选的解决方案. 一.基本概念 (1) CSS pixels与device pixels CSS pixels: 浏览器使用的抽象单位, 主要用来在网页上绘制内容. device pixels: 显示屏幕的的最小物理单位,每个dp包含自己的颜色.亮度. 等值的 CSS pixe

移动端web开发填坑指南之——百分比的过错

在移动端开发中,特别是在安卓的微信端进行开发的时候会遇到各种奇奇怪怪的坑.慢慢写慢慢填坑. 今天遇到的是,移动端中对一个div指定了height:100%;之后在安卓微信浏览器端遇到当input调起软键盘之后整个页面布局被重新resize后压扁,而ios则不会遇到这个问题. 通过实验,发现用通过js获取当前可是窗口高度后再对该div进行赋值之后,此时在安卓调起软键盘就不会出现这样的问题. 可见时对高度进行百分比设置的错.因为100%导致整个页面在软键盘弹出后进行了重新的resize操作. 做一个

移动端跨平台开发干货分享

(此文章同时发表在本人微信公众号"dotNET每日精华文章",欢迎右边二维码来关注.) 第一次推荐国内技术专家的文章,涉及的是移动端跨平台开发的话题. 之前NativeScript 1.0发布的时候,就打算谈谈移动端跨平台开发这个话题.正好,今天国内技术专家"吴多益"发表了一篇文章<聊聊移动端跨平台开发的各种技术>就这个话题,给大家分享了很多干货. 为什么大家对移动端跨平台开发总是孜孜不倦的追求,各种框架也是层出不穷呢?究其原因,还是由于纯HTML在手机