不同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 ...
随机推荐
- [ofbiz]less-than (<) and greater-than (>) symbols
问题描述: In field [updateItemStr] less-than (<) and greater-than (>) symbols are not allowed 此处的f ...
- Android 播放gif图片
Android的原生控件并不支持播放GIF格式的图片.我们都知道,在Android中如果想要显示一张图片,可以借助ImageView控件来完成,但是如果将一张GIF图片设置到ImageView里,它只 ...
- mac terminal的使用技巧
1. 多tab支持 1)terminal y也是支持多tab的, Cmd+T可以打开一个新的tab 2) cmd + shift + { / } 可以在tab间切换 2. termia ...
- Lammp安装过程
-1 建设环境 创建mysql数据库的lvm环境 创建lv逻辑卷 新安装一个硬盘25G sdb #fd ...
- nginx中配置跨域支持功能
vi /etc/nginx/nginx.conf 加入如下代码 http { ###start#### add_header Access-Control-Allow-Origin *; add ...
- Java 学习 第三篇;面向对象
1:Java的常用包: 核心类在java 包中:扩展类在javax包中 java.lang 系统默认自动导入 包含String Math System Thread等类 java.util 包含了工具 ...
- C# Stopwatch类_性能_时间计时器
在研究性能的时候,完全可以使用Stopwatch计时器计算一项技术的效率.但是有时想知道某想技术的性能的时候,又常常想不起可以运用Stopwatch这个东西,太可悲了. 属性: Elapsed 获取当 ...
- CSS发光边框文本框效果
7,166 次阅读 ‹ NSH Blog 网页设计 CSS发光边框文本框效果 或许你看过Safari浏览器下,任何输入框都会有一个发光的蓝色边框,这不单纯只是蓝色边框而已,其实包含了许多CSS3技巧知 ...
- python爬取某个网页的图片-如百度贴吧
python爬取某个网页的图片-如百度贴吧 作者:vpoet mail:vpoet_sir@163.com 注:随意copy,不用告诉我 #coding:utf-8 import urllib imp ...
- oracle 查询表名以及表的列名
oracle 查询表名以及表的列名的代码. 1.查询表名: 代码如下: select table_name,tablespace_name,temporary from user_tables [ ...