css响应式程序设计 根据屏幕尺寸显示不同CSS样式

CSS设置页面最大最小宽度

兼容ie6/7/8/9,FF,chrome,sogou等浏览器

设置最小宽度

body {

width:100%;

min-width:1000px;

width:expression_r(document.body.clientWidth < 1000 ? "1000px": "auto" );

}

设置最大宽度

body {

width:100%;

max-width:1200px;

width:expression_r(document.body.clientWidth > 1200 ? "1200px": "auto" );

}

同时设置最大宽度和最小宽度

body {

width:100%;

min-width:1000px;

max-width:1200px;

width:expression_r( Math.max(1000, Math.min(1200, document.body.offsetWidth*0.99))+"px" );

}

css ie6最小高度
min-height最小高度的实现(兼容IEie6/7/8/9、FF)

body {

min-height:100px;
height:auto !important;
height:100px;
overflow:visible;
}

原文地址:https://www.cnblogs.com/panghu123/p/11706578.html

时间: 2024-10-12 07:27:02

css响应式程序设计 根据屏幕尺寸显示不同CSS样式的相关文章

响应式设计:理解设备像素,CSS像素和屏幕分辨率

概述 屏幕分辨率.设备像素和CSS像素这些术语,在非常多语境下,是可互换的,但也因此easy在有差异的地方引起混淆,实际上它们是不同的概念. 屏幕分辨率和设备像素是物理概念,而CSS像素是WEB编程的概念:屏幕分辨率和设备像素的区别在于设备像素显示密度. 当设备屏幕ZOOM=100%的时候,浏览器CSS像素尺寸和设备像素相等,而当像素密度(pixel density)为1的时候,屏幕分辨率和设备像素相等. 响应式设计 在响应式设计中,使用了viewport,device-width,media

HTML5与CSS响应式图片

随着 Retina 屏幕的逐渐普及,网页中对图片的适配要求也越来越高.如何让图片在放大了两倍的 Retina 屏幕显示依然清晰,曾经一度困扰着网页开发者,好在 CSS3 与 HTML5 已经着力在改变这种现状.那么到底什么是响应式图片呢? 什么是响应式图片? 响应式图片是指:用户代理根据输出设备的分辨率不同加载不同类型的图片,不会造成带宽的浪费.同时,在改变输出设备类型或分辨率时,能及时加载对应类型的图片.UI前端框架最新力作!有奖试读! CSS 响应式图片 对于很多 IOS 开发者来说可能已经

css响应式布局用法

1.使用内联样式的用法 在<head>标签中使用style,使用@media指定对应屏幕分辨率大小的样式 <head lang="en"> <meta charset="UTF-8"> <title>响应式布局示例</title> <style> @media screen and (min-width: 800px) { body { background-color: red; } } @m

css响应式布局RWD

响应式布局结合了三大理念: 1)用于布局的弹性网络(百分比定义宽度) 2)用于图片和视频的弹性媒体 3)媒体查询 在布局中,需要注意的点有: 1)尽量用min-width/max-width,max-height/min-height代替width,height 2)尽量使用百分比,em为单位代替精确值 3)采用媒体查询 二.媒体查询 IE8以下不支持媒体查询,需要引入 <!-- if lte IE 8> <script src="response.min.js"&g

picturefill + picture 标签 实现兼容性很棒的 响应式图片 自适应 屏幕大小

polyfill 它是一个能够补齐浏览器兼容性问题的一个东西,使用到的<picture></picture>标签 ,并不是所有浏览器都支持,为了实现更好的兼容效果,这里就使用到了这个东西 ,它能在浏览器不支持的时候提供一些替代的方式 ,对于响应式图片,有名的picturefill库能实现兼容性强的‘响应式’图片,对于不支持picture的浏览器,它会用js获取srcset后面的设置,然后决定输出什么样的图片 使用方法 引入js文件(可从cdnjs.com下载) <script

CSS响应式设计

<link rel=“stylesheet” type=“text/css” media=“screen and (max-width: 480px),screen and (max-device-width: 480px)” href=“link.css”/> 其中 max-width 指渲染界面最大宽度,max-device-width 指设备屏幕最大宽度这段代码的意思是 当设备屏幕宽度小于等于480像素并且渲染界面最大宽度小于等于480像素时,引用link.css文件. <link

CSS响应式:根据分辨路加载不同CSS的几个方法,亲测可用

有时候你需要把同一个页面在手机和pc同时打开,其中有一个办法就是判断不同分辨路加载不同的css 小编总结了几种分别加载css的方法: 1.比较复杂的使用js判断加载不同css (亲测可用) 但是这种方法只有最开始的时候会判断,如果你拖动浏览器大小是不会发生改变的(当然如果喜欢拖着玩的话) 1 <link rel="stylesheet" type="text/css" id="links" href="../css/m_wuqin

响应式布局 大中小屏幕

最近在研究响应式布局,觉得挺好用的.给大家分享一下: <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title></title&

响应式,让屏幕自适应

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-