移动端web开发布局简单介绍(一)之移动端基础
移动端web开发布局简单介绍(一)之移动端基础
1.0移动端基础
随着技术的发展,现在Web前端行业需要掌握的技能越多,移动端的兴起。这里就简单介绍介绍关于移动端Web开发的几个布局。
1.1当前浏览器现状
- PC端常见浏览器:360浏览器、谷歌浏览器、火狐浏览器、QQ浏览器、百度浏览器、搜狗浏览器、IE浏览器
- 移动端常见浏览器:UC浏览器,QQ浏览器,欧朋浏览器,百度手机浏览器,360安全浏览器,谷歌浏览器,搜狗手机浏览器,猎豹浏览器,以及其他杂牌浏览器
国内的UC和QQ,百度等手机浏览器都是根据Webkit修改过来的内核,国内尚无自主研发的内核,就像国内的手机操作系统都是基于Android修改开发的一样。
移动端要思考的两个主要问题是:兼容移动端主流浏览器和处理Webkit内核浏览器即可
1.2手机屏幕现状
- 移动端设备屏幕尺寸非常多,碎片化严重。
- Android设备有多种分辨率:480x800, 480x854, 540x960, 720x1280,1080x1920等,还有2K,4k屏。
- 近年来iPhone的碎片化也加剧了,其设备的主要分辨率有:640x960, 640x1136, 750x1334, 1242x2208等。
- 作为开发者无需关注这些分辨率,因为我们常用的尺寸单位是 px 。
1.3移动端调试方法
- Chrome DevTools(谷歌浏览器)的模拟手机调试
- 搭建本地web服务器,手机和服务器一个局域网内,通过手机访问服务器
- 使用外网服务器,直接IP或域名访问
2.0视口
视口对于我们理解移动端和布局很重要。那什么是视口呢?
视口(viewport) 就是浏览器显示页面内容的屏幕区域。视口可以分为布局视口、视觉视口和理想视口
2.1 布局视口 layout viewport
一般移动设备的浏览器都默认设置了一个布局视口,用于解决早期的PC端页面在手机上显示的问题。
ios,Android基本都将这个视口分辨率设置为980px,所以PC上的网页大多都能在手机上呈现,只不过元素看上去很小,一般默认可以通过手动缩放网页。
2.2 视觉视口 visual viewport
这里的字面意思是用户正在看到的网页的区域。注意是网站的区域。
我们可以通过缩放去操作视觉窗口,但不会影响布局视口,布局视口仍保持原来的宽度。
2.3 理想视口 ideal viewport
为了使网站在移动端有最理想的浏览和阅读宽度而设定。理想视口,对设备来讲,是最理想的视口尺寸。需要手动添加meta视口标签通知浏览器操作。
meta视口标签的主要目的:布局视口的宽度应该与理想窗口的宽带一致,简单理解就是设备有多宽,我们布局的视口就多宽。
总结:我们开发最终会用理想视口,而理想视口就是将布局视口的宽度修改为视觉视口
2.4 meta标签
最标准的 viewport 设置:
- 视口宽度和设备保持一致
- 视口的默认缩放比例1.0
- 不允许用户自行缩放
- 最大允许的缩放比例1.0
- 最小允许的缩放比例1.0
3.0 二倍图
3.1物理像素 & 物理像素比
物理像素点指的是屏幕显示的最小颗粒,是物理真实存在的。这是厂商在出厂时就设置好了。
我们在开发的时候的1px不是一定等于1个物理像素的。一个px的能显示的物理像素点的个数,称为物理像素比或屏幕像素比。如果把1张100*100的图片放到手机里面会按照物理像素比给我们缩放。
lRetina(视网膜屏幕)是一种显示技术,可以将把更多的物理像素点压缩至一块屏幕里,从而达到更高的分辨率,并提高屏幕显示的细腻程度。对于一张 50px * 50px 的图片,在手机或 Retina 屏中打开,按照刚才的物理像素比会放大倍数,这样会造成图片模糊。
在标准的viewport设置中,使用倍图来提高图片质量,解决在高清设备中的模糊问题。通常使用二倍图, 因为iPhone 6 的影响背景图片 注意缩放问题。
3.2背景缩放background-size
background-size 属性规定背景图像的尺寸
background-size: 背景图片宽度 背景图片高度;
单位: 长度|百分比|cover|contain;
cover把背景图像扩展至足够大,以使背景图像完全覆盖背景区域。
contain把图像图像扩展至最大尺寸,以使其宽度和高度完全适应内容区域
4.0 移动开发选择和技术解决方案
####4.1移动端主流方案
1.单独制作移动端页面(主流)
通常情况下,网址域名前面加 m(mobile)
可以打开移动端。通过判断设备,如果是移动设备打开,则跳到移动端页面。
也就是说,PC端和移动端为两套网站,pc端是pc断的样式,移动端在写一套,专门针对移动端适配的一套网站
京东pc端:京东首页地址
京东移动端:京东移动端
2.响应式页面兼容移动端(其次)
响应式网站:即pc和移动端共用一套网站,只不过在不同屏幕下,样式会自动适配
比如:三星首页
4.2 移动端技术解决方案
1.移动端浏览器兼容问题
移动端浏览器基本以 webkit 内核为主,因此我们就考虑webkit兼容性问题。
我们可以放心使用 H5 标签和 CSS3 样式。
同时我们浏览器的私有前缀我们只需要考虑添加 webkit 即可
2.移动端公共样式
移动端 CSS 初始化推荐使用 normalize.css/
Normalize.css:保护了有价值的默认值
Normalize.css:修复了浏览器的bug
Normalize.css:是模块化的
Normalize.css:拥有详细的文档
官网地址: http://necolas.github.io/normalize.css/
4.3 移动端大量使用 CSS3盒子模型box-sizin
传统模式宽度计算:盒子的宽度 = CSS中设置的width + border + padding
CSS3盒子模型: 盒子的宽度= CSS中设置的宽度width 里面包含了 border 和 padding
也就是说,我们的CSS3中的盒子模型, padding 和 border 不会撑大盒子了
/*CSS3盒子模型*/
box-sizing: border-box;
/*传统盒子模型*/
box-sizing: content-box;
移动端可以全部CSS3 盒子模型
PC端如果完全需要兼容,我们就用传统模式,如果不考虑兼容性,我们就选择 CSS3 盒子模型
4.4移动端特殊样式
/*CSS3盒子模型*/box-sizing: border-box;-webkit-box-sizing: border-box;/*点击高亮我们需要清除清除 设置为transparent 完成透明*/-webkit-tap-highlight-color: transparent;/*在移动端浏览器默认的外观在iOS上加上这个属性才能给按钮和输入框自定义样式*/-webkit-appearance: none;/*禁用长按页面时的弹出菜单*/img,a { -webkit-touch-callout: none; }
5.0移动端常见布局
移动端单独制作
- 流式布局(百分比布局)
- flex 弹性布局(强烈推荐)
- less+rem+媒体查询布局
- 混合布局
响应式
- 媒体查询
- bootstarp
乾坤未定,你我皆是黑马!!!
移动端web开发布局简单介绍(一)之移动端基础相关推荐
- SSM+Layui网上书城系统 移动端Web开发
移动Web 与 原生应用的优劣势 一.移动 Web 的优势 跨平台: 网页应用运行在浏览器上,不会直接和系统打交道 开发成本低: Because 没有平台问题,开发者不需要掌握多种开发语言和框架 更容 ...
- 移动端WEB开发之响应式布局(响应式开发原理、bootstrap、阿里百秀案例)
移动端WEB开发之响应式布局 1.1 响应式开发原理 就是使用媒体查询针对不同宽度的设备进行布局和样式的设置,从而适配不同设备的目的. 设备的划分情况: <!DOCTYPE html> & ...
- 移动端WEB开发——响应式布局
移动端WEB开发之响应式布局 1.0 响应式开发原理 1.1 响应式开发原理 就是使用媒体查询针对不同宽度的设备进行布局和样式的设置,从而适配不同设备的目的. 设备的划分情况: 设备划分 尺寸区间 超 ...
- 移动端WEB开发之-响应式布局
目录 移动端WEB开发之响应式布局 1.0 响应式开发原理 1.1 响应式开发原理 1.2 响应式布局容器 2.0 bootstrap的介绍 2.1Bootstrap简介 2.2 bootstrap优 ...
- 20.【移动端Web开发之响应式布局】
文章目录 [移动端Web开发之响应式布局]前端小抄(20) 一.响应式开发 1.1 响应式开发原理 1.2 响应式布局容器 二.Bootstrap前端开发框架 2.1 Bootstrap简介 2.2 ...
- 移动端web开发之响应式布局
文章目录 前言 一.响应式开发 1.1 响应式开发原理 1.2 响应式布局容器 二.Bootstrap前端开发框架 2.1 Bootstrap 简介 2.2 Bootstrap 使用 2.3 布局容器 ...
- 蓝旭前端开发:GITtomcat+nginx原理移动端web 开发
蓝旭前端开发:GIT+移动端 web 开发 目录 一.==GIT== 1.1 ==Git与GitHub== 1.2 ==GitHub注册和Git的下载安装== 二.==Git的使用== 2.1 ==本 ...
- 从零开始学习移动端Web开发
背景 近年来,随着智能手机的普及,移动端开发受到了异常的关注.从传统的安卓.IOS原生手机系统应用开发,转向了移动端Web开发或者是混合开发,既然有需求,那就让我们一起来学习移动端Web开发吧.本文旨 ...
- 轻松掌握移动端web开发【尺寸适配】常用解决方案
本文主要针对初学移动端web开发的读者,笔者也是初学者,文中有众多用词不当之处望读者指正. 前言 从开始做web app开发到现在,一直对移动端的尺寸适配有一种模糊的概念.能说得上来'媒体查询','栅 ...
最新文章
- python中str的index什么意思_python中index的用法是什么
- 把偷快递的贼炸到怀疑人生!不愧是 NASA 工程师,奇思妙想
- CVTRES : fatal error CVT1100: 资源重复。类型: BITMAP LINK : fatal error LNK1123: 转换到 COFF 期间失败: 文件无效或损坏...
- 深度解析K-L变换 及其 在特征识别中的应用
- 二十一、String、StringBuffer和StringBuilder的区别是什么?
- 计算机二级循环储存,【日常干货】计算机二级基础知识(第三期)
- 做到我这样,你也能拿到京东Offer
- Linux—系统启动类故障之 GRUB引导故障
- 最贵新股没破发,此前弃购7.8个亿,背靠华为的这家半导体公司这么香?
- python面向对象编程实例:烤地瓜
- Linux系统备份工具 REAR (RELAX-AND-RECOVER)
- 用JS来动态设置CSS样式
- unity3d用sever还是php,unity3d教程
- 川普撞脸希拉里(基于 OpenCV 的面部特征交换)-1
- Mybatis联表查询:多对多(注解实现)
- php 复制文件夹并压缩到最小_php压缩多个文件打包成zip并下载到本地
- 复旦陈果老师关于孤独、寂寞、朋友和人际的课堂笔记
- HTTPS背后的加密算法
- 导出word如何默认打开为页面视图
- 《厚黑学》| 矫情镇物