高邮建设局网站,公众号微信,岱岳区网站设计,德阳建设局网站文章目录 移动web开发流式布局1.0 移动端基础1.1浏览器现状1.2 手机屏幕的现状1.3常见移动端屏幕尺寸1.4移动端调试方法 2.0 视口2.1 布局视口 layout viewport2.2视觉视口 visual viewport2.3理想视口 ideal viewport#xff08;苹果#xff09;2.4meta标签 3.0 物理像素(手… 文章目录 移动web开发流式布局1.0 移动端基础1.1浏览器现状1.2 手机屏幕的现状1.3常见移动端屏幕尺寸1.4移动端调试方法 2.0 视口2.1 布局视口 layout viewport2.2视觉视口 visual viewport2.3理想视口 ideal viewport苹果2.4meta标签 3.0 物理像素(手机分辨率)物理像素比3.1 概述3.2二倍图3.3背景缩放background-size 4.0 移动开发选择和技术解决方案4.1移动端主流方案4.2 移动端技术解决方案4.3 移动端大量使用 CSS3盒子模型box-sizing4.4移动端特殊样式参考京东移动端 5.0移动端常见布局 移动web开发流式布局
1.0 移动端基础
1.1浏览器现状
PC端常见浏览器360浏览器、谷歌浏览器、火狐浏览器、QQ浏览器、百度浏览器、搜狗浏览器、IE浏览器。
移动端常见浏览器QQ浏览器欧朋浏览器百度手机浏览器360安全浏览器谷歌浏览器搜狗手机浏览器猎豹浏览器遨游以及其他杂牌浏览器。
国内的UC和QQ百度等手机浏览器都是根据Webkit修改过来的内核国内尚无自主研发的内核就像国内的手机操作系统都是基于Android修改开发的一样。
总结兼容移动端主流浏览器处理Webkit内核浏览器即可。
1.2 手机屏幕的现状
移动端设备屏幕尺寸非常多碎片化严重Android设备有多种分辨率480x800, 480x854, 540x960, 720x12801080x1920等还有传说中的2K4k屏。近年来iPhone的碎片化也加剧了其设备的主要分辨率有640x960, 640x1136, 750x1334, 1242x2208等。作为开发者无需关注这些分辨率因为我们常用的尺寸单位是 px 。
移动设备与PC设备最大的差异在于屏幕这主要体现在屏幕尺寸和屏幕分辨率两个方面。
通常我们所指的屏幕尺寸实际上指的是屏幕对角线的长度一般用英寸来度量如下图所示 而分辨率则一般用像素来度量 px表示屏幕水平和垂直方向的像素数例如1920*1080指的是屏幕垂直方向和水平方向分别有1920和1080个像素点而构成如下图所示 1.3常见移动端屏幕尺寸 注:作为前端开发,不建议大家去纠结dp,dpi,pt,ppi等单位。
1.4移动端调试方法
Chrome DevTools谷歌浏览器的模拟手机调试搭建本地web服务器手机和服务器一个局域网内通过手机访问服务器使用外网服务器直接IP或域名访问
2.0 视口
视口viewport是用来约束网站中最顶级块元素的即它决定了的大小。
视口viewport就是浏览器显示页面内容的屏幕区域。 视口可以分为布局视口、视觉视口和理想视口
2.1 布局视口 layout viewport
一般移动设备的浏览器都默认设置了一个布局视口用于解决早期的PC端页面在手机上显示的问题。
iOS, Android基本都将这个视口分辨率设置为 980px所以PC上的网页大多都能在手机上呈现只不过元素看上去很小一般默认可以通过手动缩放网页。(因为980像素放到手机上之后会被压缩在手机的屏幕尺寸之内所以看起来文字比较小) 2.2视觉视口 visual viewport
字面意思它是用户正在看到的网站的区域。注意是网站的区域。
我们可以通过缩放去操作视觉视口但不会影响布局视口布局视口仍保持原来的宽度。 2.3理想视口 ideal viewport苹果
为了使网站在移动端有最理想的浏览和阅读宽度而设定
理想视口对设备来讲是最理想的视口尺寸
meta视口标签的主要目的布局视口的宽度应该与视觉视口的宽度一致简单理解就是设备有多宽我们布局的视口就多宽
需要手动添写meta视口标签通知浏览器操作
总结我们开发最终会用理想视口而理想视口就是将布局视口的宽度修改为视觉视口
2.4meta标签 最标准的viewport设置
视口宽度和设备保持一致视口的默认缩放比例1.0不允许用户自行缩放最大允许的缩放比例1.0最小允许的缩放比例1.0
meta nameviewport contentwidthdevice-width, initial-scale1.0, maximum-scale1.0, user-scalable0, shrink-to-fitno, viewport-fitcover3.0 物理像素(手机分辨率)物理像素比
3.1 概述
1.物理像素点指的是屏幕显示的最小颗粒是物理真实存在的。这是厂商在出厂时就设置好了,比如苹果6 是 750* 1334
物理像素指的是屏幕渲染图像的最小单位属于屏幕的物理属性不可人为进行改变其值大小决定了屏幕渲染图像的品质我们以上所讨论的都指的是物理像素。
// 获取屏幕的物理像素尺寸window.screen.width;window.screen.height;// 部分移动设备下获取会有错误与移动开发无关只需要了解
2、CSS像素与设备无关像素指的是通过CSS进行网页布局时用到的单位其默认值(PC端)是和物理像素保持一致的1个单位的CSS像素等于1个单位的物理像素但是我们可通缩放来改变其大小。
我们开发时候的1px 不是一定等于1个物理像素的
一个px的能显示的物理像素点的个数称为物理像素比或屏幕像素比 Pixels Per Inch也叫像素密度所表示的是每英寸所拥有的像素数量。因此PPI数值越高即代表显示屏能够以越高的密度显示图像。当然显示的密度越高拟真度就越高
Pixels Per Inch是像素的密度单位就像PPI值越高画面的细节就会越丰富所以数码相机拍出来的图片因品牌或生产时间不同可能有所不同常见的有72PPI180PPI和300PPI,默认出来就是这么多。
lRetinap
是一种显示技术可以将把更多的物理像素点压缩至一块屏幕里从而达到更高的分辨率并提高屏幕显示的细腻程度,意指具有较高PPI大于320的屏幕 3.2二倍图
随着技术发展设备不断更新出现了不同PPI的屏幕共存的状态如iPhone3G/S为163PPIiPhone4/S为326PPI像素不再是统一的度量单位这会造成同样尺寸的图像在不同PPI设备上的显示大小不一样。
如下图假设你设计了一个163163的蓝色方块在PPI为163的屏幕上那这个方块看起来正好就是11寸大小在PPI为326的屏幕上这个方块看起来就只有0.5*0.5寸大小了。 做为用户是不会关心这些细节的他们只是希望在不同PPI的设备上看到的图像内容差不多大小所以这时我们需要一个新的单位这个新的单位能够保证图像内容在不同的PPI设备看上去大小应该差不多这就是独立像素在IOS设备上叫PT(Point)Android设备上叫DIP(Device independent Pixel)或DP。
举例说明就是iPhone 3GPPI为1631dp 1pxiPhone 4PPI为3261dp 2px。
我们也不难发现如果想要iPhone 3G/S和iPhone 4/S图像内容显示一致可以把iPhone 4/S的尺寸放大一倍它们是一个2倍(2x)的关系即在iPhone3G/S的上尺寸为44乘44px在iPhone4/S上为88乘88px我们要想实现这样的结果可以设置44乘44dp这时在iPhone3G/S上代表44乘44px在iPhone4/S上代表88乘88px最终用可以看到的图像差不多大小。
通过上面例子我们不难发现dp同px是有一个对应比例关系的这个对应比例关系是操作系统确定并处理目的是确保不同PPI屏幕所能显示的图像大小是一致的通过window.devicePixelRatio可以获得该比例值。
问图像大小显示问题解决完毕后就结束了吗并没有。
对于一张 44px * 44px 的图片,在手机或 Retina 屏中打开按照刚才的物理像素比会放大倍数这样会造成图片模糊 答在标准的viewport设置中使用倍图来提高图片质量解决在高清设备中的模糊问题
通常使用二倍图
3.3背景缩放background-size
background-size 属性规定背景图像的尺寸
background-size: 背景图片宽度 背景图片高度;background-size:auto 100px;单位 长度|百分比|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-sizing
传统模式宽度计算盒子的宽度 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移动端特殊样式参考京东移动端
* {-webkit-tap-highlight-color: rgba(0, 0, 0, 0);outline: 0
}blockquote,
body,
button,
dd,
dl,
dt,
fieldset,
form,
h1,
h2,
h3,
h4,
h5,
h6,
hr,
input,
legend,
li,
ol,
p,
pre,
td,
textarea,
th,
ul {margin: 0;padding: 0;vertical-align: baseline
}img {border: 0;vertical-align: top
}em,
i {font-style: normal
}ol,
ul {list-style: none
}button,
h1,
h2,
h3,
h4,
h5,
h6,
input,
select {font-size: 100%;font-family: inherit
}table {border-collapse: collapse;border-spacing: 0
}a,
a:visited {text-decoration: none;color: #333
}body {margin: 0 auto;min-width: 320px;max-width: 540px;background: #fff;font-size: 14px;font-family: -apple-system, Helvetica, sans-serif;line-height: 1.5;color: #666;-webkit-text-size-adjust: 100% !important;padding-bottom: env(safe-area-inset-bottom)
}/*点击高亮我们需要清除清除 设置为transparent 完成透明*/* {-webkit-tap-highlight-color: transparent;
}/*在移动端浏览器默认的外观在iOS上加上这个属性才能给按钮和输入框自定义样式*/input {-webkit-appearance: none;
}/*禁用长按页面时的弹出菜单*/img,
a {-webkit-touch-callout: none;
}div {/* css3 盒子模型 */box-sizing: border-box;
}.clearfix:after {content: ;display: block;line-height: 0;visibility: hidden;height: 0;clear: both;
}
5.0移动端常见布局
移动端单独制作
流式布局百分比布局flex 弹性布局强烈推荐lessrem媒体查询布局混合布局
响应式
媒体查询bootstarp
流式布局
流式布局就是百分比布局也称非固定像素布局。
通过盒子的宽度设置成百分比来根据屏幕的宽度来进行伸缩不受固定像素的限制内容向两侧填充。
流式布局方式是移动web开发使用的比较常见的布局方式。
