没有合适的资源?快使用搜索试试~ 我知道了~
移动web和响应式第2天课堂笔记1
需积分: 0 0 下载量 101 浏览量
2022-08-08
19:40:10
上传
评论
收藏 876KB DOCX 举报
温馨提示
![preview](https://dl-preview.csdnimg.cn/86359878/0001-55485aab90f5da0528c9d754d5b50a45_thumbnail-wide.jpeg)
![preview-icon](https://csdnimg.cn/release/downloadcmsfe/public/img/scale.ab9e0183.png)
试读
23页
5.5英寸的小手机,分辨率是1920*1080 3.4 固比固页面上经常有这样的部分:固定宽度剩余部分固定宽度方法1:绝对定位的方法方法2: display:b
资源详情
资源评论
资源推荐
![](https://csdnimg.cn/release/download_crawler_static/86359878/bg1.jpg)
第 1 页 共 23 页
移动 web 和响应式
第 2 天课堂笔记(本课程共 4 天)
目录
移动 web 和响应式................................................................................................................................................................1
一、视口复习........................................................................................................................................................................2
二、手机浏览器内核............................................................................................................................................................3
三、百分比布局....................................................................................................................................................................5
3.1 相对于谁.................................................................................................................................................................5
3.2 CSS3 弹性盒属性 display:-webkit-box; .................................................................................................................6
3.3 CSS3 新的盒模型 box-sizing:border-box...............................................................................................................7
3.4 固比固.....................................................................................................................................................................8
3.5 min-width、max-width............................................................................................................................................9
四、高度等比变化..............................................................................................................................................................10
4.1 图片自动就是等比例变化的...............................................................................................................................10
4.2 padding-top 猫腻 ...................................................................................................................................................10
4.3 js.........................................................................................................................................................................11
4.4 display:table-cell ....................................................................................................................................................11
五、em 和 rem.....................................................................................................................................................................12
六、媒体查询......................................................................................................................................................................15
七、携程建设作业..............................................................................................................................................................16
![](https://csdnimg.cn/release/download_crawler_static/86359878/bg2.jpg)
第 2 页 共 23 页
一、视口复习
50 英寸的电视机,分辨率是 3840*2160;
5.5 英寸的小手机,分辨率是 1920*1080; PPI:401
PPI:pixal per inch 每平方英寸像素的个数。
手机的 PPI 很大,所以屏幕小但是像素多,所以颗粒感小,视网膜屏,让人看不到屏幕上的像素点。
如果用 1:1 的视口呈递网页,那么将会像从高空俯瞰整个页面。你想啊,你的手机的高度就是 1920px,我们做的
博雅互动总高才 1415px。也就是说,如果用手机 1:1 的视口呈递页面,所有的页面都是高空俯瞰。文字很小,不
可读。所以手机不可能用 1:1 的视口呈递网页。
人为规定了两个视口:
1)默认视口,基本都是 980px,这是绝大多数 PC 版网页的版心宽度,就能让我们的手机正好卡主版心。这是一
种妥协:各个网站还没有来得及做手机版网页的时候,就只能让手机用户用手机看 PC 版网页,视口 980 恰到好
处;
2)约束后的视口,通过加上一个简单的 meta 标签,就能让手机使用约束后的视口来呈递网页:
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0,
minimum-scale=1.0" />
约数后的视口宽度都是在 320~480 之间(手机竖直使用的时候)
这个视口的尺寸,是手机厂商设置的,能够保证我们的文字比如 16px,在自己的这个视口下清晰、大小刚刚合
适。所以大屏幕的手机的约束视口 > 小屏幕手机的约束视口。
这就能够保证我们的网页可以用 px 写字号、写行高。比如我们的盒子尺寸是 200px*200px,指的是用视口的像
素点。在手机呈递的时候,屏幕的真实物理像素点,可能是 635px*635px 个像素点;别的手机呢,真实物理像
素点可能是 595px*595px。绝对尺寸不一样,给用户在手机屏幕上的感觉是一致的。
最最重要的一句话:前端开发工程师,丝毫不关心手机的分辨率,我们只关心视口。
![](https://csdnimg.cn/release/download_crawler_static/86359878/bg3.jpg)
第 3 页 共 23 页
二、手机浏览器内核
在移动端,仅有四个独立的浏览器内核,分别为微软的 Trident、火狐的 Gecko、开源内核 Webkit、Opera 的
Presto。
目前微软的 Trident 在移动终端上主要为 WP7、8 系统内置浏览器。Opera 的 Presto 内核主要为 Opera Mobile、
OperaMini、欧朋浏览器以及欧朋 HD Beta 版。Webkit 内核的适用范围则较为广泛,Android 原生浏览器、苹果
的 Safari、谷歌的 Chrome(Android4.0 使用)都是基于 Webkit 开源内核开发的。
兼容的前缀:
1 -ms-
2 -moz-
3 -o-
4 -webkit-
http://gs.statcounter.com/#mobile_browser-CN-monthly-201504-201604
中国用户的浏览器市场份额:
UC、Android 内置、Chrome、Safari、QQ Browser 都是 webkit 内核,从图上看占了 98%的市场份额。
所以一定要伺候好-webkit-。 有的公司干脆只兼容-webkit-,别的兼容比如-ms-都不写。
剩余22页未读,继续阅读
![docx](https://img-home.csdnimg.cn/images/20210720083331.png)
![docx](https://img-home.csdnimg.cn/images/20210720083331.png)
![docx](https://img-home.csdnimg.cn/images/20210720083331.png)
![docx](https://img-home.csdnimg.cn/images/20210720083331.png)
![application/x-rar](https://img-home.csdnimg.cn/images/20210720083606.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![rar](https://img-home.csdnimg.cn/images/20210720083606.png)
![js](https://img-home.csdnimg.cn/images/20210720083646.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![js](https://img-home.csdnimg.cn/images/20210720083646.png)
![avatar](https://profile-avatar.csdnimg.cn/8017c643ba4b43a497db822aa2da9582_weixin_35734364.jpg!1)
赶路的稻草人
- 粉丝: 24
- 资源: 330
上传资源 快速赚钱
我的内容管理 展开
我的资源 快来上传第一个资源
我的收益
登录查看自己的收益我的积分 登录查看自己的积分
我的C币 登录后查看C币余额
我的收藏
我的下载
下载帮助
![voice](https://csdnimg.cn/release/downloadcmsfe/public/img/voice.245cc511.png)
![center-task](https://csdnimg.cn/release/downloadcmsfe/public/img/center-task.c2eda91a.png)
安全验证
文档复制为VIP权益,开通VIP直接复制
![dialog-icon](https://csdnimg.cn/release/downloadcmsfe/public/img/green-success.6a4acb44.png)
评论0