传统的网页设计都是为了适应在电脑上进行浏览，但是由于移动智能终端的普及，越来越多的人喜欢在移动终端进行网页的访问，这就需要做到如何适应不同屏幕大小的移动终端了，而这就需要用到@ media screen方法进行屏幕大小的判断。下面就随我一起进行实际操作吧。
工具/原料
1
操作系统：win10专业版
2
演示代码编辑器：editplus5
3
演示浏览器：edge浏览器
方法/步骤
1
第一步：打开editplus编辑器新建一个网页文档。
2
第二步：为了能模拟能在不同屏幕大小的终端上浏览效果，我们首先进行简单的页面布局。编写三个div标签。
3
第三步：为这三个标签编写样式，首先如果在电脑上浏览的时候，三个div标签 在显同一行示。
4
第三步：在浏览器中进行查看此时的效果状态。
5
第四步：假如我们要在手机上进行自适应手机屏幕大小进行查看的话，就需要用到@media screen。假设手机屏幕大小width为300px到600px时，三个div标签并排显示。
6
第六步：以上只是举了一个简单的例子，需要注意的一点就是最好在
头部标签中加上： 既自适应设备标签。7
第七步：设置以后，我们通过缩放浏览器的大小来模拟不同屏幕大小时我们所设置的网页布局显示方式。
8
总结：1、以上我们再缩放浏览器的时候就是模拟不同屏幕大小时的网页显示方式2、首先在写样式时，从第一个样式起就必须使用@media screen的形式，不让后面设置的css将不能正确执行3、@media screen 后的格式一般是：@media screen and （min-width:){ }的形式。4、如果屏幕大小设置在一个区间的话就需要写成：@media screen and （min-width:）and （max-width:）{ }的形式。
上一篇：4个值得注意的错误化妆方法
下一篇：欢乐捕鱼大战怎么获得冰冻道具