//不能使用绝对宽度的布局 不能使用具有绝对宽度的元素

 media_type    设备类型说明
all 所有设备
aural 听觉设备
braille 点字触觉设备
handled 便携设备,如手机、平板电脑
print 打印预览图等
projection 投影设备
screen 显示器、笔记本、移动端等设备
tty 如打字机或终端等设备
tv 电视机等设备类型
embossed 盲文打印机 //屏幕的宽度 大于等于400px的时候,应用styleA.css
<link rel="stylesheet" type="text/css" href="styleA.css" media="screen and (min-width: 400px)"> //当屏幕的宽度大于600小于800时,应用styleB.css
<link rel="stylesheet" type="text/css" href="styleB.css" media="screen and (min-width: 600px) and (max-width: 800px)"> //
@media screen and (max-width: 641px) { /*当屏幕尺寸小于600px时,应用下面的CSS样式*/
.class {
background: #ccc;
}
} 移动端 //h:w = 16:9 (9h/16/ 360*9/16 = h)
360*640
480
720
1080 目前主流的台式机显示器尺寸及对应的分辨率如下
18.5英寸/1366*768
19英寸/1440*900
20英寸/1600*900
21.5英寸/1920*1080
22英寸/1680*1050
23英寸/1920*1080
24英寸/1920*1080
27英寸/1920*1080
27英寸/2560*1440

css 关于自适应页面的更多相关文章

  1. 演示:纯CSS实现自适应布局表格

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

  2. css网页自适应-2

    昨天中午Google进行了一次在线讲座,讲述自适应网页设计的概念和方法,维护同一个网页代码,即可使网站在多种浏览设备(从桌面电脑显示器到智能手机或其他移动产品设备)上具有更好的阅读体验,这里我将该讲座 ...

  3. CSS流体(自适应)布局下宽度分离原则

    CSS流体(自适应)布局下宽度分离原则 这篇文章发布于 2011年02月28日,星期一,00:48,归类于 css相关. 阅读 73990 次, 今日 5 次 by zhangxinxu from h ...

  4. CSS实现自适应不同大小屏幕的背景大图的两种方法(转自简书)

    CSS实现自适应不同大小屏幕的背景大图的两种方法 一张清晰漂亮的背景图片能给网页加分不少,设计师也经常会给页面的背景使用大图,我们既不想图片因为不同分辨率图片变形,也不希望当在大屏的情况下,背景有一块 ...

  5. 常见css垂直自适应布局(css解决方法)

    css3的盒模型, css3中添加弹性盒模型,最新弹性盒模型是flex,之前为box <!DOCTYPE html> <html > <head> <titl ...

  6. 常见css水平自适应布局

    左右布局,左边固定,右边自适应布局 BFC方法解决 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" ...

  7. CSS补充之--页面布局、js补充,dom补充

    CSS补充之--页面布局 主站一:(下面是一个大致的模板) <div class="pg-header"> <div style="width: 120 ...

  8. css实现自适应屏幕高度;

    css实现自适应屏幕高度: <!DOCTYPE html><html lang="en"><head> <meta charset=&qu ...

  9. CSS 控制Html页面高度导致抖动问题的原因

    CSS 控制Html页面高度导致抖动,这类由高度导致页面抖动的问题,其实究其根本原因是滚动条是否显示导致的 在CSS中添加如下代码: html,body{ overflow-y:scroll;} ht ...

随机推荐

  1. Spring Cloud(一):服务注册中心Eureka

    Spring Cloud 基于 Netflix 的几个开源项目进行了封装,提供包括服务注册与发现(Eureka),智能路由(Zuul),熔断器(Hystrix),客户端负载均衡(Ribbon)等在内的 ...

  2. js字符数组转化为数字数组

    先谈一谈需求,我有一个字符串数组,数组内容是字符类型的数字,需要把字符类型的数字转换为数字类型,找了找资料,发现牛人真是多,把前辈的经验总结一下. 例子 ['1','2','3'] => [1, ...

  3. Asp.Net Core下的开源任务调度平台ScheduleMaster—快速上手

    概述 ScheduleMaster是一个开源的分布式任务调度系统,它基于Asp.Net Core平台构建,支持跨平台多节点部署运行. 它的项目主页在这里: https://github.com/hey ...

  4. mysql中emoji表情存储

    mysql中emoji表情存储 背景 在mysql 5.7.19,创建的数据库默认选择的编码是utf8 -- UTF-8 Unicode,因此字段默认的编码为utf-8,但在项目开发中存在一个需求:在 ...

  5. cogs 1963. [HAOI 2015] 树上操作 树链剖分+线段树

    1963. [HAOI 2015] 树上操作 ★★★☆   输入文件:haoi2015_t2.in   输出文件:haoi2015_t2.out   简单对比时间限制:1 s   内存限制:256 M ...

  6. Python中函数参数 *args 和 **kwargs

    普通参数,即在调用函数时必须按照准确的顺序来进行参数传递. 默认参数,即参数含有默认值,在调用函数时可以进行参数传递,若没有进行参数传递则使用默认值,要注意,默认参数必须在普通参数的右侧(否则解释器无 ...

  7. typescript学习笔记(一)---基础变量类型

    作为一个前端开发者,学习新技术跟紧大趋势是必不可少的.随着2019年TS的大火,我打算利用一个月的时间学习这门语言.接下来的几篇文章是我学习TS的学习笔记,其中也会掺杂一些学习心得.话不多说,先从基础 ...

  8. Oracle Autonomous Health Framework (AHF) 解读

    AHF介绍 Oracle在2019年10月18日发布自治健康框架Autonomous Health Framework (AHF) 19.3,将ORAchk,EXAchk,TFA三种诊断工具合并入AH ...

  9. java常量 数据类型

    一.常量 概念:程序运行期间,内容不发生改变的量 1.字符串常量 双引号 2.整数常量 3.浮点数常量 4.字符常量 单引号 一个字符 必须要有一个字符 不能为空 5.布尔常量 true false ...

  10. Python 练习实例100 | 菜鸟教程

    http://www.runoob.com/python/python-exercise-example100.html