设置了在不同分辨率下,显示的css样式:

@media screen and (min-width:1080px){
.box{ width: 1080px;}.content{width: 1040px;}
.img{height:180px;}
.img{font-size: 48px;line-height: 180px;}
.title{font-size: 46px;line-height: 100px;}
.detail{font-size: 20px;}
} @media screen and (min-width: 900px) and (max-width: 1079px) {
.box{ width: 900px; }.content{width: 860px;}
.img{height:160px;}
.img{font-size: 40px;line-height: 160px;}
.title{font-size: 38px;line-height: 80px;}
.detail{font-size: 17px;}
}
@media screen and (min-width: 768px) and (max-width: 899px) {
.box{ width: 768px; }.content{width: 728px;}
.img{height:140px;}
.img{font-size: 32px;line-height: 140px;}
.title{font-size: 30px;line-height: 60px;}
.detail{font-size: 14px;}
}
@media only screen and (min-width: 480px) and (max-width: 767px){
.box{ width: 480px; }.content{width: 440px; }
.img{height:98px;}
.img{font-size: 24px;line-height: 100px;}
.title{font-size: 22px;line-height: 40px;}
.detail{font-size: 11px;}
}
@media only screen and (max-width: 479px) {
.box{ width: 300px; }.content{width: 300px;}
.img{height:60px;}
.img{font-size: 16px;line-height: 60px;}
.title{font-size: 14px;line-height: 20px;}
.detail{font-size: 8px;}
}

要是刚好在那个宽度上,如:屏幕宽度900,刚好

关于HTML,css3自适应屏幕,自适应宽度的更多相关文章

  1. html中图片自适应浏览器和屏幕,宽度高度自适应

    1.(宽度自适应):在网页代码的头部,加入一行viewport元标签. <meta name="viewport" content="width=device-wi ...

  2. 【笔记】css 实现宽度自适应屏幕 高度自适应宽度

    如果说宽高自适应屏幕尺寸那么大家可能会想到 div{ width: 100%; height: 100% } 但是如果我要自适应屏幕尺寸的同时还要变成正方形呢?(高度和宽度相等而高度不能写死) 那就要 ...

  3. 通过rem自适应屏幕尺寸

    通过rem自适应屏幕尺寸 常用的前端单位 px px就是pixel的缩写,设备分辨率,物理像素 pt pt就是point的缩写,逻辑分辨率,逻辑像素 em 参考物是父元素的font-size,具有继承 ...

  4. 4种必须知道的Android屏幕自适应解决方案

    文章来源:http://blog.csdn.net/shimiso/article/details/19166167 demo下载:http://www.eoeandroid.com/forum.ph ...

  5. 【jQuery】百分比自适应屏幕轮播图特效

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  6. 【Cocos2d-x 3.x】屏幕自适应匹配

    在进行游戏开发时, 由于市场上的Android移动设备的分辨率有很多种,而且IOS移动设备的分辨率也不相同,为了能让手游能在90%以上的移动设备较为完美的运行,因此需要考虑屏幕的自适应问题,让一套资源 ...

  7. android自适应屏幕方向和大小

    一:不同的layout Android手机 屏幕 大小不一,有480x320, 640x360, 800x480.怎样才能让App自动 适应不同的屏幕 呢?      其实很简单,只需要在res目录下 ...

  8. Div 自适应屏幕大小

    http://blog.csdn.net/wodetiankong516/article/details/7827256 Background      有时, 我们需要将div或者其他的Elemen ...

  9. 【Unity3D插件】NGUI屏幕自适应(转)

    屏幕自适应 NGUI可以比较方便的实现屏幕自适应,但是它的官方教程里面针对这个问题没有详细的教程,所以可能在实现的时候会走比较多的弯路.以下是我在开发过程中找到的一个比较方便的实现方法. 主要组件 1 ...

  10. Unity3D NGUI自适应屏幕分辨率(2014/4/17更新)

    原地址:http://blog.csdn.net/asd237241291/article/details/8126619 原创文章如需转载请注明:转载自 脱莫柔Unity3D学习之旅 本文链接地址: ...

随机推荐

  1. BZOJ4596:[SHOI2016]黑暗前的幻想乡——题解

    https://www.lydsy.com/JudgeOnline/problem.php?id=4596 https://www.luogu.org/problemnew/show/P4336#su ...

  2. BZOJ1877:[SDOI2009]晨跑——题解

    http://www.lydsy.com/JudgeOnline/problem.php?id=1877 https://www.luogu.org/problemnew/show/P2153 Ela ...

  3. react事件机制

    1. react的事件是合成事件((Synethic event),不是原生事件 <button onClick={this.handleClick}></button> &l ...

  4. 2017-7-19-每日博客-关于Linux下的CentOS中文件夹基本操作命令.doc

    CentOS中文件夹基本操作命令 文件(夹)查看类命令 ls--显示指定目录下内容 说明:ls 显示结果以不同的颜色来区分文件类别.蓝色代表目录,灰色代表普通文件,绿色代表可执行文件,红色代表压缩文件 ...

  5. node.js 与java 的主要的区别是什么

    node.js 与java都是服务器语言,但是两者存在很大区别:(1)Node.js比Java更快 :node.js开发快,运行的效率也算比较高,但是如果项目大了就容易乱,而且javascript不是 ...

  6. JAVA对象的深度克隆

    有时候,我们需要把对象A的所有值复制给对象B(B = A),但是这样用等号给赋值你会发现,当B中的某个对象值改变时,同时也会修改到A中相应对象的值! 也许你会说,用clone()不就行了?!你的想法只 ...

  7. [mysql]修改表段默认值

    alter table xxx alter location drop default; alter table xxx alter location set default "xxx&qu ...

  8. css渐变知识知多少

    <!DOCTYPE html><html><head><meta charset="utf-8"> <title>教程( ...

  9. 查看自己电脑外网IP

    连着wifi,在CMD窗口中显示的无线局域网适配器IP很有可能是内网IP.此时可以通过下面方法查看自己的电脑外网IP. 1.前提条件可以上外网: 2.上外网百度,输入IP,进行搜索. 3.查看结果即可 ...

  10. 【Android】完善Android学习(一:API 2.3.3)

    备注:之前Android入门学习的书籍使用的是杨丰盛的<Android应用开发揭秘>,这本书是基于Android 2.2API的,目前Android已经到4.4了,更新了很多的API,也增 ...