响应式布局设置--@media only screen and

2021年7月16日16:45:24 发表评论
广告也精彩

1、当屏幕的宽度大于600小于800时,应用styleB.css 

  1. < link rel ="stylesheet"  type ="text/css"  href ="styleB.css"  media ="screen and (min-width: 600px) and (max-width: 800px)" >

2、当屏幕尺寸小于600px时,应用下面的CSS样式

  1. @media screen and (max-width600px)  {
  2.   .class {
  3.     background#ccc;
  4.   }
  5. }

 

/* 大屏幕 :大于等于1200px*/

@media (min-width: 1200px) { ... }

 

/*默认*/

@media (min-width: 980px){...}

 

/* 平板电脑和小屏电脑之间的分辨率 */

@media (min-width: 768px) and (max-width: 979px) { ... }

 

/* 横向放置的手机和竖向放置的平板之间的分辨率 */

@media (max-width: 767px) { ... }

 

/* 横向放置的手机及分辨率更小的设备 */

@media (max-width: 480px) { ... }

 

 

 

  • 我的微信
  • 这是我的微信扫一扫
  • weinxin
  • 我的微信公众号
  • 我的微信公众号扫一扫
  • weinxin
ts小陈

发表评论(请规范评论)--评论需审核

:?: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :cry: :mrgreen: :mrgreen: :mrgreen: :mrgreen: :mrgreen: :mrgreen: :neutral: :razz:

已登录用户不需要填写以下内容