Web响应式布局项目实战 15.了解移动端的特性 学习猿地原创

好，咱们开始来上课，那么今天呢，咱们主要讲一下咱们的这个响应式页面布局啊，那么咱们响应式呢，就是根据咱们这个不同的屏幕尺寸来设置不同的样式，对吧？那么咱们说了做响应式布局就是干嘛，如果是手机端来访问，我们应该显示什么样对吧？如果是这个，呃，PC端来访问，我们应该显示什么样的，没错吧？哎，这就是咱们的响应式啊，那么在做这个小应式之前呢，我们需要去来了解一个属性啊，这个属性呢，也是跟咱们这个移动端相关的啊，也就说咱们移动这个设备的特性，那么咱们来看啊，我这里边直接拿代码来给大家演示了啊。比如说我这里面新建一个文件叫做v ewpt。QR，好了，那现在咱们来看啊，我在这里边有一个div标签，然后呢，我再来一个select标签好了，那么现在啊，咱们来这里边，呃，我来设置一下style标签，给它加一个div。逗号E，好了，给他们两个设置什么呢？宽度100像素，然后高度也为100像素，注意这个像素指的是什么像素，指的是我们CSS像素对不对？哎，那么OK，那么现在咱们来看好了，我在这里边。

叫做，呃，单独设置一下吧，比如说div的，我们给它一个B啊，包啊，不用给包的，给的BAGR等于什么颜色呢？等于一个紫色，然后再来secret selection，我们还是一样给它一个颜色，给它来一个yellow green好了，那现在我们有这么两个元素，那么这两个元素呢，我让它浮动float left，一个向左，一个向右，Float right。OK。好了，那现在咱们来看各位啊，我来刷新一下，你看在我当前的这个浏览器里边，是不是一左一右都有这两个元素对吗？那好，注意这是一个什么，一个100跟100的大概这么大对不对？那么如果要用手机端来访问的，你看如果我这里边右右键我点的属性对吧，一点它就是手机端了，对吧？如果用手机端的，你看这个东西是不是明显变小了。

来我给它放大啊，好了，我就又又来一个啊来你看好了，这里边这个元素，手机端的元素是不是明显变小了，哎，那OK，那这样的话，也就是说在我当前啊，如果我为PC端来设置的话，那么手机端其实它是不兼容的，对不对，因为什么？因为他们两个的分辨率是不一样的。没错吧，哎，那这样的话，如果在我正常去设置的时候，我想让他们两个分辨率是一样的啊，就比如说都叫做物理像素啊物理分辨率，那么这个时候怎么办呢？我可以通过这个me标签来进行设置，设置一个什么呢？设置一个这个叫做name属性等于VWPT啊，设置它的这个视觉窗口啊，那么设置它窗口什么样呢？我这里边告诉他内容给它做一个限制，等于什么呀？WTH宽度等于什么？你设备的宽度D。杠WTHWDTH，好。那么这回咱们来看，这回我设置完以后，接下来我们再来这里边啊，先看这里边刷新是没有任何影响，哎，因为它不是针对PC的，是不是专门是针对我们移动端的，那再往下来。

再看这里。刷新哎，你看这两个元素是不是明显大了，这个时候你看跟我的PC效果，跟我的PC的这个元素的大小是不是就一样了。所以说嘛，诶也就是说我要他干嘛呢，我要它的这个宽度等于我设备的宽度啊，让我当前这个宽度等于设备的宽度，那这是一种方式，那么另外我还可以怎么做呢？咱们来看还是一样，我通过这个Meta标签name属性叫vipt，然后content，我这回告诉他呢，我告诉他缩放的这个大小init杠。S。C Le啊，等于多少，等于1.0倍啊，缩放大小等于1.0，那现在咱们来看啊，我这里边一样刷新对于我PC的页面还是没有任何影响，对吧，那么再来看。呃，这啊，再来刷新，你看他们两个是不是也一样。看到了吗？哎，那么也就是说我给它设置1.0被表示什么意思，表示的是不是就是它们两个实际是变成一样的了，没说吧？哎，那OK，那么一样我能给它变成1.0，那我能不能设置2.0的，2.0是不是相当于放大了两倍，那放大两倍咱们来看在我手机端这里边啊，来一点刷新，你看我整个元素是不是放大了，放大了由于这边的面积不够装在它的，所以它下来了，没错吧，那么一样在这里边，你看再返回来这里也一样，我再刷新，你看对它有印象吗？这没没有。

哎，这就是咱们这个。这个属性干嘛呢？叫做将页面放大啊，将页面放大，那么在默认的还是给他1.0倍啊1.0倍，那么在咱们正常布局的时候呢，咱们会用什么呢？用完美视觉窗口，什么叫完美视觉窗口来布局呢？就是这两个属性加在一起，我先给它还原回来啊。哎呀，有缓存吧。刷新。我2.0没改回来吗？看一下2.0我已经改回来了，对吧，那OK，这里边有缓存啊呃，取消一下再回来OK好了啊。啊，好了，这个已经好了，那现在咱们来看啊，这个时候我说了，把这两个加在一起叫什么叫做完美视觉窗口，但是大家也看到了，他们两个实际上是不是都是对这个设备进行什么进行。

给中间用这个逗号分割啊，这两个是不是都是设备，将设备进行这个转换，相当于转换成一样大小对吧？诶这个是要求我的宽度等于设备的宽度，而这个要求是什么呀？是等比例对吧？就缩放，缩放的话，缩放为1.0 1.0就是一倍正常的嘛，对不对，那现在你看我一样刷新，包括我再还原回来再过来，你看是不是都是一样的大小了。看明白了吧，哎，那么另外呢，你像在PC端里边，我们是可以可以这么样去玩的，比如说你看我可以这里边加加加加加加加，是不是用户可以进行缩放缩小跟放大对吧，包括我减的，诶在移动端里边能不能的移动端也可以，移动端看什么，我拿两个手指是不是也可以放大缩小。那OK，我来给大家演示一下啊，这里边我需要去开一个。一个东西啊。

好了。稍等一下，他没给我出地址，OK，这个地址出来了啊，这个呢，通过这个地址就可以访问我的服务器了啊，因为当前服务器也是开着的啊，那么咱们来看我在这里边，我只是为了让大家能看到这个效果啊，看到我当前这个页面，我也是直接来访问这个页面。好，我发到我的微信里了，然后呢，这里边有一个，诶这个啊投屏软件，我投了微信啊，那现在我们来看。来。打开。打开以后咱们来看啊，我在这里边。好了，点完以后注意我手，我手再放在这里，你看我是不是可以放大，再缩小到了吗？现在哪去了。往上滑，诶来了，看到了吗？元素是不是被我放大了，哎，那OK，我也可以干嘛呢？在这里边进行设置，不让用户进行什么进行缩放，那怎么办？这里边默认用户是可以缩放的，对吧？逗号通过这个user杠杠什么呢？杠这个lab s CA。

LABLE。I think开。了SCSC啊等于什么呢？SC等于no啊，干嘛禁止用户缩放好了，那我现在设置完以后，咱们再回过来看，你看我的这个手机端。啊，那我需要给他刷新一下啊，来刷新，希望你别掉，OK，没掉，这回你再看我手手手你看啊，我手一直在动，现在它只能上下了啊，我两只手在动，在放大，在缩小。那你看它是不是一直都没有变化对吧，始终都是在这儿，这个时候干嘛，我们就已经禁止了这个用户对他的说放但家注意我的是苹果手机，我把这个地址如果用这个sa浏览器啊，用苹果浏览器打开是可以缩放的，苹果浏览器里边是关闭了这个属性的啊，是关闭了这个属性的，那么如果在苹果浏览器里边也不允许用户进行缩放的话，干嘛呢？我们就需要把这个需要用这个GS啊来去控制，需要GS来控制啊，那么用它的目的是干嘛呢？是为了我们再去做混合APP的时候让它更逼真啊，因为APP注意我们做a PA papp里面的页面是什么，是不是跟通过程序打包都已经是下载到我们本地了，对不对，诶，所以它呢是节省比较节省带宽的啊，因为bapp毕竟是什么CS结构的，对不对，所以在这个时候用户是干嘛的，他是缩放不了它的页面的啊，是缩放不了的啊，所以我们一般在做混合APP时候会采用这个属性啊，如果不是混合APP正常外部APP的话，一般不考虑这个属性，就让它变成什么默认yes啊可以。

进行缩放，或者是根本就不设置它啊，根本就不设置它啊，OK，这就是这几条需要我们去先来了解的这个。Me的相关属性啊，好，我们来看一下在这个里边。来咱们来看啊移动设备特性，这里面我说了iOS和安卓浏览器都是基于web k的内核，那么这两种浏览器有许和许多其他的浏览器都支持使用什么使用这个微pod，那么meate元素呢？是覆盖默认的画布缩放设置，那么只需要在HTML的标签中插入这个meate标签，然后ATE标签中可以设置具体的宽度的缩放比，看到了吧，下面为示例，那么这里边你看我通过贝标来设置name等于v pod，然后设置CT内容，它是不是让它进行1.1.0缩放，对吧，正常的，然后宽度呢是什么？是不是设备的宽度？哎，那么你像这里边你看好了。

Name等于外pod说明说明什么？说明此面的标签是定义四口的属性对吧？也就是我定义四口，然后后面跟的内容跟的条件是什么？条件是不是将页面放成1.0倍，然后宽度等于什么？等于设备的宽度，注意这两条属性加在一起叫做完全完美视觉窗口啊，完美视口所意在我们去测的时候，这两条属性都会给它加在一起啊，另外呢，我们还可以干嘛？允许用户将页面最大放置多少倍对吧？最小压缩多少倍？那么通过什么？通过这两个属性一个叫什么？那这呢啊，Maxi MU杠最大的三倍，还有一个min。

I nu MU，然后0.5是不是最小缩放到多少0.5倍吧，包括我们可以干嘛呀，让用户禁止缩放啊，禁止缩放直接设置为no，那这里边也说了，禁止用户缩放可以在什么在混合APP的时候来使用啊，那么为了使用这个H页面更逼真，那么这个时候让页面进行无法进行什么进行缩放啊，这就是咱们这个需要大家先来了解的mate标签这几个啊，因为我们再去做响应式布局的时候，那肯定我们这个视视觉的这两个窗口对吧，一个是PC的，一个是我的这个移动端的，他们两个肯定要保持的一致才可以，对不对，因为毕竟我不是单独的为这个移动端去编写页面啊，所以这个属性我们要先来知道一下啊，好了，那这节课我们到这里。