主页 > 技术领域 >

博客适配1024x768、1280x800分辨率的小记

2018-05-12 01:01

今日,给博客多加了几行代码,匹配了1024x768分辨率与1280x800的分辨率,其实就几行代码,如下图:

图片.png

这里来简单的记录下

Media Queries

简单的说,Media Queries就是根据不同的分辨率显示不用的css,Media Queries是写自适应网页非常重要的一点,如果大家想更加详细的了解Media Queries,自行百度就OK,资料非常多。

我们可以直接在link中判断设备的分辨率,从而引用不用的单独css文件,如下代码:

<link rel="stylesheet" type="text/css" href="styleA.css" media="screen and (min-width: 400px)">

以上代码,当屏幕的宽度大于等于400px的时候,应用styleA.css

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

以上代码是当屏幕的宽度大于600小于800时,应用styleB.css

非常简单,当然,你也可以直接写到原有的css中,如下:

@media screen and (max-width: 600px) { /*当屏幕尺寸小于600px时,应用下面的CSS样式*/
  .class {
    background: #ccc;
  }
}

非常简单,这里就不在多说了,大家结合着上图中我写的代码,就知道怎么用啦。

小强博客

小强博客

1990年人士,8年互联网经验。
商业服务
  • (1)黑白帽SEO高端外包服务
  • (2)黑白帽SEO高端顾问
  • (3)中大型程序开发
  • (4)中大型数据库优化与开发
  • (5)高端培训(技术 & 思维)
  • (6)指定网站入侵扫描 & 安全检测
  • (7)指定服务器入侵扫描 & 安全检测
  • (8)黑灰色项目承接 & 合作 & 顾问
  • (9)开源CMS二次开发与BUG修复
  • (10)开源CMS模版设计开发与仿站
  • (11)小 & 中 & 大型网站从零开发
  • (12)品牌解决方案
  • (13)销量解决方案
  • (14)顾问与培训解决方案
  • 联系方式
  • QQ:97028048
  • 微信:zjkszq1990 & zZ683135
  • E-mail:adolph@timeandevent.com