Toi首页制作

许睿

2019.12.24

193人浏览

基于媒体查询的toi首页制作,在不同分辨率下显示不同的界面效果

开发环境:HbuilderX

作者:睿萌萌

在系统分辨率在768以上的时候会显示如下界面:

Toi首页制作

在768分辨率以下的时候界面样式会改变:

Toi首页制作

媒体查询(@media):

    @media可以针对不同的屏幕尺寸设置不同的样式,对我们设置响应式界面非常有帮助.

    我们在使用的时候只需在css中添加如下代码,然后在{}中写入新的css样式,即可达到切换效果

@media only screen and (min-width:768px){

}

    需要特别注意的是,@media只会对样式进行覆盖,不会清空,也就是说,如果在其他分辨率下写了其他的样式,在当前分辨率下如果不想让该样式显示,需要对不想要的css属性进行清空.


项目链接:http://www.xiaozhuqz.com/Toi%20Toi%20Wines/index.html

许睿    918 天津市北辰区 设计师杨冰是女孩 1997.08.16
京ICP备17020986号-1
设计师啪啪网2019版