移动web开发基础知识_html/css_WEB-ITnose

　　首先做开发码子编完了我们得有个工具去看效果，pc端开发我们有firefox,chrome等等，那么我们做手机web用什么做调试？手机设备多种多样，不同品牌，不同的屏幕尺寸。当然我们不可能把所有的手机设备都买齐了，然后在开发的时候，在桌子上从左到右依次摆放，在写了一段代码之后，从左到右依次刷新，呵呵。如果真有人这么去做，我也不说啥了，我只求跪求土豪咱做朋友吧~嘿嘿。

废话说了一推，说回重点：首先，移动web开发咱需要一个调试工具。

1.Google emulation：谷歌的移动端模拟器，简单的理解为pc模拟手机的屏幕大小和浏览器特性的一个东东。

打开方式：打开chrome浏览器，然后F12键打开，开发者工具，点击小手机的图标，如下图

立即学习“前端免费学习笔记（深入）”；

打开的效果和各部分的功能作用：

立即学习“前端免费学习笔记（深入）”；

首先我们在device里可以选择需要模拟的设备，这个很重要，决定我们写的页面可以适配什么样的手机

打开device下拉菜单看到可以模拟的设备：可以看到主流的手机这里基本都有了O(∩_∩)O

立即学习“前端免费学习笔记（深入）”；

有了emulation我们可以很方便的做开发了。

知我AI

一款多端AI知识助理，通过一键生成播客/视频/文档/网页文章摘要、思维导图，提高个人知识获取效率；自动存储知识，通过与知识库聊天，提高知识利用效率。

26

查看详情

2.veiwport: 什么是veiwport?

官方解释：手机浏览器是把页面放在一个虚拟的“窗口”（viewport）中，通常这个虚拟的“窗口”（viewport）比屏幕宽，这样就不用把每个网页挤到很小的窗口中（这样会破坏没有针对手机浏览器优化的网页的布局），用户可以通过平移和缩放来看网页的不同部分。移动版的 Safari 浏览器最新引进了 viewport 这个 meta tag，让网页开发者来控制 viewport 的大小和缩放，其他手机浏览器也基本支持。

简单的理解为，移动终端的可视区。

关于veiwport的有关设置：

常见的例子：前端免费学习笔记（深入）”；

@media all and (min-width: 400px)

媒体类型所有媒体，屏幕宽度400px以上执行某某样式

@media all and (max-width: 399px)

媒体类型所有媒体，屏幕宽度399px以下上执行某某样式

@media screen and (min-width:600px) and (max-width:900px)

媒体类型屏幕 ，当屏幕尺寸大于600小于900px时执行的某某样式

实际工作中引用link标签时候使用：

<link rel="stylesheet" media="all and (max-width:600px)" href="small.css" type="text/css" /><link rel="stylesheet" media="all and (min-width:900px)" href="big.css" type="text/css"  /><link rel="stylesheet" media="all and (min-width:600px) and (max-width:900px)" href="style.css" type="text/css" />