不同css样式适应不同屏幕大小实现自适应宽度
@media screen and (判断属性){ CSS样式选择器 }
例如:
<div class="silder_photo"></div>
<style>
.silder_photo{width:100%;}
@media screen and (min-width: 1501px) {
.silder_photo{left:20%;}
}
/* css注释:设置了浏览器宽度不小于1501px时 silder_photo显示20%宽度 */
@media screen and (max-width: 1501px) {
.silder_photo{left:5%;}
}
/* css注释:设置了浏览器宽度小于1501px时 silder_photo显示5%宽度 */
</style>
不同css样式适应不同屏幕大小实现自适应宽度的更多相关文章
- IE对CSS样式的数量和大小的限制
项目中遇到的问题,css写的样式无法渲染,各种百度后发现大概是这个原因: IE对CSS样式的数量和大小的限制 文档中只有前31个link或style标记关联的CSS能够应用. 从第32个开始,其标记关 ...
- 利用onresize使得div可以随着屏幕大小而自适应的代码
原文:http://www.jb51.net/article/21831.htm 当我们让div居中时候,一般有两种方法,一种是固定左右宽度,也就是使用像素绝对定位:另一种是用百分比来相对定位,在这种 ...
- css布局:左边固定宽度,右边自适应宽度或右侧固定,左侧自适应三种方法
方法一:浮动布局 这种方法我采用的是左边浮动,右边加上一个margin-left值,让他实现左边固定,右边自适应的布局效果 HTML Markup <div id="left" ...
- CSS样式案例(1)-文字的排版
本篇介绍的是小窗文字内容的排版,通过该篇文章可以让小伙伴们熟悉以下几个知识点: word-space.overflow.text-overflow. 最终的展示效果如下: 参考步骤: 1. 建立htm ...
- 如何根据屏幕大小改变class的css样式
/*当屏幕小于1200px*/ @media (max-width:1200px) { ...} 此处针对所有小于1200px屏幕的css属性. /*当屏幕小于1200px且大于992px*/ @me ...
- CSS 屏幕大小自适应
要想实现css屏幕大小自适应,首先得引入 CSS3 @media 媒体查询器: media的使用和规则: ①被链接文档将显示在什么设备上. ②用于为不同的媒介类型规定不同的样式. 语法: @medi ...
- html 网页背景图片根据屏幕大小CSS自动缩放
https://blog.csdn.net/coslay/article/details/47109281 腾讯微博和QQ空间的登录背景图片是根据访客的屏幕大小自动缩放的,但是好像是用JQuery代码 ...
- js 根据屏幕大小调用不同的css文件
原因:屏幕大小不一样,网站看起来总觉得怪怪的,所以,针对不同大小的屏幕,写了不同的css,写完了,要解决的问题就是:怎么根据屏幕的大小来引用不同的CSS,下面就是解决方法了. 解决方法:首先,在hea ...
- bootstrap-全局css样式
bootstrap-全局css样式 1.bootstrap是一个前端框架 2.基本模板:viewport视口可以解决移动端设备网页自适应问题 3.版心(.container) 流式版心(.con ...
随机推荐
- C语言获取键盘按键
在写控制台游戏的时候,发现不管用cin,scanf还是getchar,都不能实时的输入按键,必须要按回车才能读进去,而按回车的话会导致输入异常,所以要使用获取键盘按键的函数. 加入头文件#includ ...
- GSS2-Can you answer these queries II
---恢复内容开始--- 这道题真的是非常恶心,看题解看了半天才弄懂,而且题解上说的相当简略. 此题大意是询问去掉重复元素的最大子区间和,没有修改操作. 没有修改操作,这样就可以离线处理了. 这道题有 ...
- a^b的前n位数
假设我们现在需要知道 ab 的后 n 位数或前 n 位数,简单直观的做法就是求出 ab 的值,然后在分别取前 n位或后 n位,不过在 a,b很大的情况下显然是无法存储的.所以,直接求是不可能的了. ...
- java开发webservice
第一部分:相关下载配置 1.开发环境 eclipse-jee-mars-2-win32-x86_64.zip http://www.eclipse.org/downloads/index-pac ...
- 函数内声明变量不加var和加var的区别
这段代码说明了在函数中声明没加var关键字的变量时,会出现什么结果. 分两种不同的情况: 1.如果函数内没有同名的局部变量覆盖“无var变量”,那么它就是个全局变量,在函数外部也可以访问到 ...
- pyspider安装后,点击run,报pyhton has stop working或python已停止运行的错误
问题解决虽然只有几句话,但是背后花了一天时间,各种FQ搜索. pyspider目测只支持32位的系统,所以你下载32位的python安装就行了,然后安装pyspider运行就没有问题了,坑爹啊---- ...
- js 属性类型
1.访问器属性 var book = { _year: 2004, edition: 1 }; Object.defineProperty(book, "year", { get: ...
- 关于Keil C51中using关键字的使用心得
刚才看到一位很牛的师兄写的一篇日志中提到了Keil C51中using这个关键字的用法,粗心的我本来一直都没有留意它是用来干嘛的(因为我一般看见它都是在中断服务函数的定义开头处,好像没有了它也可以中断 ...
- Silverlight 结合ArcGis 在地图画点
原文 http://www.dotblogs.com.tw/justforgood/archive/2012/05/10/72076.aspx 我们直接来看完成后的画面读者会比较有兴趣 如上,小马在地 ...
- Eclipse IDE for Java EE Developers使用和新建工程helloworld
开发j2ee还是用专门的java ee eclipse,自带了许多开发j2ee的插件,包括: This package includes: Data Tools Platform Eclipse Gi ...