关于HTML,css3自适应屏幕,自适应宽度
设置了在不同分辨率下,显示的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自适应屏幕,自适应宽度的更多相关文章
- html中图片自适应浏览器和屏幕,宽度高度自适应
1.(宽度自适应):在网页代码的头部,加入一行viewport元标签. <meta name="viewport" content="width=device-wi ...
- 【笔记】css 实现宽度自适应屏幕 高度自适应宽度
如果说宽高自适应屏幕尺寸那么大家可能会想到 div{ width: 100%; height: 100% } 但是如果我要自适应屏幕尺寸的同时还要变成正方形呢?(高度和宽度相等而高度不能写死) 那就要 ...
- 通过rem自适应屏幕尺寸
通过rem自适应屏幕尺寸 常用的前端单位 px px就是pixel的缩写,设备分辨率,物理像素 pt pt就是point的缩写,逻辑分辨率,逻辑像素 em 参考物是父元素的font-size,具有继承 ...
- 4种必须知道的Android屏幕自适应解决方案
文章来源:http://blog.csdn.net/shimiso/article/details/19166167 demo下载:http://www.eoeandroid.com/forum.ph ...
- 【jQuery】百分比自适应屏幕轮播图特效
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- 【Cocos2d-x 3.x】屏幕自适应匹配
在进行游戏开发时, 由于市场上的Android移动设备的分辨率有很多种,而且IOS移动设备的分辨率也不相同,为了能让手游能在90%以上的移动设备较为完美的运行,因此需要考虑屏幕的自适应问题,让一套资源 ...
- android自适应屏幕方向和大小
一:不同的layout Android手机 屏幕 大小不一,有480x320, 640x360, 800x480.怎样才能让App自动 适应不同的屏幕 呢? 其实很简单,只需要在res目录下 ...
- Div 自适应屏幕大小
http://blog.csdn.net/wodetiankong516/article/details/7827256 Background 有时, 我们需要将div或者其他的Elemen ...
- 【Unity3D插件】NGUI屏幕自适应(转)
屏幕自适应 NGUI可以比较方便的实现屏幕自适应,但是它的官方教程里面针对这个问题没有详细的教程,所以可能在实现的时候会走比较多的弯路.以下是我在开发过程中找到的一个比较方便的实现方法. 主要组件 1 ...
- Unity3D NGUI自适应屏幕分辨率(2014/4/17更新)
原地址:http://blog.csdn.net/asd237241291/article/details/8126619 原创文章如需转载请注明:转载自 脱莫柔Unity3D学习之旅 本文链接地址: ...
随机推荐
- HashMap & SparseArray & ArrayMap 简单说明
HashMap 使用有限一维拉链数组存储结构,鉴于所用Entry结构{key, value, nextExtry},Key的hash值用于取余获得所属的数组行下标,通过链表方式顺序存放所有余数相同的各 ...
- wildcard ,notdir ,patsubst ,obj=$(dir:%.c=%.o)
Makefile中wildcard的介绍 在Makefile规则中,通配符会被自动展开.但在变量的定义和函数引用时,通配符将失效.这种情况下如果需要通配符有效,就需要使用函数“wildcard”,它的 ...
- Linux下 ps -ef 和 ps aux 的区别及格式详解
原文:https://www.cnblogs.com/5201351/p/4206461.html Linux下ps -ef和ps aux的区别及格式详解 Linux下显示系统进程的命令ps,最常用的 ...
- CodeBlocks调试功能快捷教程
在程序设计中,单步调试能够跟踪程序的执行流程.跟踪过程中,还可以观察变量的变化,从而发现其中存在的问题.单步执行除了可以帮助我们发现设计的程序中存在的问题,对于初学者,还可以帮助我们理解语言的机制. ...
- ACE反应器(Reactor)模式(1)
转载于:http://www.cnblogs.com/TianFang/archive/2006/12/13/591332.html 1.ACE反应器框架简介 反应器(Reactor):用于事件多路分 ...
- 常州模拟赛d7t3 水管
分析:第一问还是很好做的,关键是怎么做第二问.我们可以每次删掉最小生成树上的一条边,然后再求一次最小生成树,看边权和大小和原来的是不是一样的,不过这个做法效率很低. 考虑Kruskal算法的原理,每次 ...
- 树莓派使用Samba共享文件夹
转载自:http://raspberrypihq.com/how-to-share-a-folder-with-a-windows-computer-from-a-raspberry-pi/ Shar ...
- im-switch -s ibus错误:Error: no configuration file "ibus" exists.
在虚拟机上安装Ubuntu14.04 后安装ibus输入法,万万没想到在切换输入法的时候居然出错了! 无语了,再网上查了一下,这个错误出现的还是比较少的. 先说Ubuntu输入法(ibus)安装的一般 ...
- DFS搜索题素数环
素数环: 输入整数1,2,3,4,5,···,n组成一个环,使得相邻两个整数之和均为素数. 输出时从整数1开始逆时针排列.同一个环应恰好输出一次.n<=16. Sample: input: 6 ...
- gulp压缩css和js
压缩 css 代码可降低 css 文件大小,提高页面打开速度. 规律转换为 gulp 代码 找到 css/ 目录下的所有 css 文件,压缩它们,将压缩后的文件存放在 dist/css/ 目录下.一. ...