15158846557 在线咨询 在线咨询
15158846557 在线咨询
所在位置: 首页 > 营销资讯 > 网站运营 > 新手小白制作不同屏幕自适应网页的小诀窍

新手小白制作不同屏幕自适应网页的小诀窍

时间:2023-09-25 08:36:01 | 来源:网站运营

时间:2023-09-25 08:36:01 来源:网站运营

新手小白制作不同屏幕自适应网页的小诀窍:小白同学学习网页制作时,经常会被各种屏幕尺寸,宽度单位搞的一头雾水,同一个网页,如何适应笔记本,桌面电脑,平板电脑,手机浏览呢?为什么有的页面在电脑端和手机端看起来不一样,可以自动适应不同屏幕呢?

不说复杂的解释,这里只说简单快速的技巧,等小白熟练了再去理解细节。

(ps:如果你不想学css,也可以直接线上使用超级单页 vipcom.cc 的自适应模板,不同技术和设计也可以快速制作漂亮的自适应页面,如果是想学习的同学可以继续往下看)

直接上口诀:用 css 的 media 做处理。

啥意思呢?就好比房间装修一样,给你不同大小的房间,你就针对不同房间进行特定的搭配,这个media就是起这个作用,它可以根据不同的屏幕宽度,指定特定的网页效果。

比如我把小于600像素宽度的设备统统当手机处理,就可以用下面这个块。

@media (max-width: 600px) { /** ** 这里面写手机端的css样式 **/ .div{ } }以此类推,你还可以继续分类。

@media screen and (min-width: 600px) and (max-width:900px) { /** ** 宽度是600到900px ** 这里面写中等屏幕,比如一些平板等设备 的css样式 **/ .div{ }}具体宽度,你可以直接修改,我上面仅仅是举列子,其他宽度就不说了,也是同样的道理。

这样的话,表面上看,你好像只做了一个页面,其实通过media,你把多个子页面合在同一个页面了,只不过这个页面是可变的,屏幕宽度一变,它的样子也会跟着变。

(这也是为什么自适应的网页制作更费时间,但是考虑到微信打开一个网页的概率是如此之高,你又不得不去做)

如上图,这个就是用media分类写css,单独做了不同的样式,所以就可以自适应。

然后再说说手机端布局的小技巧,新手如果觉得那种像素单位px,rem等单位很麻烦的话,直接用px,然后元素宽度用%代替px就好了。

关键词:适应,诀窍,新手,屏幕

74
73
25
news

版权所有© 亿企邦 1997-2025 保留一切法律许可权利。

为了最佳展示效果,本站不支持IE9及以下版本的浏览器,建议您使用谷歌Chrome浏览器。 点击下载Chrome浏览器
关闭