移动Web初级入门

Posted 2021-04-30 Cocoa开发者社区

点击上方“CocoaChina” 即可关注

即将开始涉入移动Web了，有点小兴奋也有点小紧张，希望能在未来的团队里带来一些价值。记录一下我现在所认识的移动Web。

关于布局

我们来看看移动端最常见的布局：

（上中下布局）

下面实现上述页面常见移动Web布局三种方法：fixed，absolute，flexbox

fixed

对于第一种布局，其实现原理就是header和footer部分都为fixed定位。内容页面可以使用-webkit-overflow-scrolling:touch来进行滚动，当然，对于不支持的，也可以使用iscroll来兼容。 fixed布局网上人说坑太多，滚动的时候bug太多，特别是表单元素时弹出输入法会有很多问题，所以不建议使用，以下是一些网上参考的资料：

- 移动Web开发实践——解决position:fixed自适应BUG

https://github.com/maxzhang/maxzhang.github.com/issues/11

- 移动端web页面使用position:fixed问题总结

https://github.com/maxzhang/maxzhang.github.com/issues/2

- 移动Web开发，4行代码检测浏览器是否支持position:fixed

https://github.com/maxzhang/maxzhang.github.com/issues/7

absolute

和fixed一样，只不过将fixed定位设为绝对定位。设定其left,right等值。下面有一个绝对定位的DEMO。

- 绝对定位的DEMO

http://www.hacke2.cn/demo/mobile/position/absolute.html

flexbox

flexbox布局我估计是仿照flex*布局方式。由于主流移动端都使用的现代浏览器都支持这个CSS3属性。Flexbox布局俗称伸缩布局，它可以简单快速的创建一个具有弹性功能的布局。由于移动多终端的需求，所以首选是flexbox。

- flexbox的DEMO

http://www.hacke2.cn/demo/mobile/position/flex.html

- [译]flexbox全揭秘

http://css-tricks.com/snippets/css/a-guide-to-flexbox/

图片与文字

非背景图片

之前提到的常见移动Web名词，设备像素比：2的高清视网膜技术却会使图片变得模糊，这是为什么呢？

(中密度与超高密度的区别)

根据计算公式，一个像素点会被拆分成4个小点，显示起来自然模糊了。

解决方案一般有两个：

1. 设置target-densitydpi=device-dpi，采用按照真实比例来展示，然后进行媒体查询技术如下面代码：

#header { background:url (medium-density-image.png); } @media screen and (- webkit -device-pixel-ratio:1.5) { /* CSS for high-density screens */ #header { background:url (high-density-image.png);} } @media screen and (- webkit -device-pixel-ratio:0.75) { /* CSS for low-density screens */ #header { background:url (low-density-image.png);} } 以上是关于移动Web初级入门的主要内容，如果未能解决你的问题，请参考以下文章 移动web性能优化从入门到进阶 移动端开发（初级入门） 移动端开发（初级入门） rem 结合 scss 移动端自适应 初级入门demo [AndroidStudio]_[初级]_[配置自动完成的代码片段] [AndroidStudio]_[初级]_[配置自动完成的代码片段]