1. 首页
  2. 网络干货

[教程]灵活运用@media screen,简单写响应式布局

什么是自适应响应式布局,来看这张GIF。

你以为自适应响应式布局仅需要写上“width:100%”就可以了吗,NONONO。整体外框架使用width:100%效果一般,一般多用于内框架,最外层div依旧是推荐固定值。当然,头部与底部使用100%更好。

一般写响应式布局都需要@media来完成,也就是根据当前浏览器分辨率来进行布局改变,说白就是自适应响应式,即所变so可见,那么@media的用法是怎样的?

用法

该代码的形式是这样的(这句代码的意思为:分辨率小于1920执行的CSS代码

@media screen and (max-width: 1920px) {

  }

所有需要改变的内容写到{中}

举个例子,正常情况下是这样的,也就是任何分辨率及其电脑上的显示内容,那么我希望分辨率在改变的同时,改变内容。

.ikmoe{
	width:100px;
	height:100px;
	background-color:red;
	font-size:25px;
}

在小于分辨率720P的情况下,我希望它在不改变其他属性的情况下,仅仅改变宽与高,那么就可以这样单独写,将会被覆盖原来上面的样式。

@media screen and (max-width:1366px){
	.ikmoe{
		width:50px;
		height:50px;
	}
}

实际操作

将720P以上(包含720P)显示表情框为宽屏模式,则只需要更改原样式。

.smiliepad {
	width: 830px;
	height: 420px;
}

为了让移动端也可以正常的使用表情,那么就需要为移动端分辨率额外增加一个CSS样式,这里将720P以下的分辨率统统改成了竖行显示,及其改变了表情图片的大小。

@media screen and (max-width:1365px) {
	.smiliepad {
		width: 250px
	}

	#ik-wp-smiley {
		width: 65px
	}
}

 

其他参数

分辨率大于720P
@media screen and (min-width:1366px){}
分辨率大于1366且小于1920
@media screen and (min-width: 1366px) and (max-width: 1920px){}
分辨率小于1366
@media only screen and (max-width: 1366px) {}

最后

灵活运用该参数后,可以无需js,就可以做到响应式布局,并且能为各个端及其设备标识做出更多的布局样式,还可以为一定分辨率下的设备写出惊喜的彩蛋。

[打赏一下]
  • 版权声明:本文基于《知识共享署名-相同方式共享 3.0 中国大陆许可协议》发布,转载请遵循本协议
  • 文章链接:https://ikmoe.com/7416.html [复制] (转载时请注明本文出处及文章链接)
上一篇:
:下一篇

作者:月宅

介绍:今天也要看我装逼吗?

文章:2624篇
https://ikmoe.com/
最后更新:18-02-07

16 条评论

gravatar

  1. 橘纸柚 2
    喜欢月宅

    淡定右键收藏 :黄色滑稽脸:

    #倒数1楼
  2. 梁兴健 2
    喜欢月宅

    签到成功!签到时间:下午5:33:37每日打卡,生活更精彩哦~

    #倒数2楼
  3. AppleMiku 1
    初来乍到

    菜鸡来学习一下 :贴吧表情31:

    #倒数3楼
  4. Jrotty 3
    爱上月宅

    推荐你用毒瘤写法,用vh和vw作为单位 [林大B11]

    #倒数4楼
  5. Homework Good Or Bad 1
    初来乍到

    assignment writing service help with writing essay writing service editing service

    #倒数5楼
  6. 猫酱杂货店 3
    爱上月宅

    还是小会员,老早就超过期限了,我的会员依然在!~ [微博表情2]

    #倒数6楼
  7. 猫酱杂货店 3
    爱上月宅

    HIA~HIA~HIA~

    #倒数7楼
  8. 某昴 4
    援交大佬

    :贴吧表情30: 码一个,研究一下

    #倒数8楼
  9. c 2
    喜欢月宅

    感觉图片还是自适应宽度的好……不然都扁了。。

    #倒数9楼
  10. 情醉中国风 5
    正正正正

    |・ω・`)成大会员了,好鸡冻?

    #倒数10楼
  11. 情醉中国风 5
    正正正正

    不懂代码(=_=),默默帮顶→_→

    #倒数11楼
  12. 后宫学长 3
    爱上月宅

    现在评论改回来了还是好点,不用注册。

    还有GIF动图,漫月也是蛮费心思的呢 ~

    #倒数12楼
    1. 猫酱杂货店 3
      爱上月宅

      @后宫学长 怪不得呢,我在之前还以为登录键狗带了。。。

  13. 狂放 5
    正正正正

    感觉这要成前端教程站了,还是基础 :黄色滑稽脸:

    #倒数13楼
  14. ha 1
    初来乍到

    签到成功!签到时间:下午11:15:23每日打卡,生活更精彩哦~

    #倒数14楼
  15. 月宅 6
    月宅后宫
    [最萌站长]

    签到成功!签到时间:下午9:25:54每日打卡,生活更精彩哦~

    #倒数15楼
当前页面评论被关闭,原因如下: