HTML4和css2目前支持为不用的媒体类型设定专有的样式,如,一个页面在屏幕上时使用无衬线字体,而在打印时使用衬线字体.screen和print是两种已定义的媒体类型.媒体查询让样式表有更强的针对性,扩展了媒体类型的功能. 媒体查询既可以在样式表中使用也可以在link中使用,甚至可以指定应用的样式表. <!-- 在link中使用媒体查询 --><link rel="stylesheet" type="text/css" media="s…

(响应式PC端媒体查询)电脑屏幕分辨率尺寸大全 时间:2015-08-17 16:50:40      阅读:3961      评论:0      收藏:0      [点我收藏+] 标签:style   代码   si   sp   bs   im   c   res   on PC端 按屏幕宽度大小排序(主流的用橙色标明) 分辨率   比例 | 设备尺寸 1024*500 (8.9寸) 1024*768 (比例4:3  | 10.4寸.12.1寸.14.1寸.15寸; ) 1280*800…

响应式布局        响应式布局,简而言之,就是一个网站能够兼容多个终端--而不是为每个终端做一个特定的版本.这个概念是为解决移动互联网浏览而诞生的.        响应式布局可以为不同终端的用户提供更加舒适的界面和更好的用户体验,而且随着目前大屏幕移动设备的普及,用"大势所趋"来形容也不为过.随着越来越多的设计师采用这个技术,我们不仅看到很多的创新,还看到了一些成形的模式. html5/css3响应式布局介绍及设计流程,利用css3的media query媒体查询功能.移动终端一…

PC端************ 按屏幕宽度大小排序(主流的用橙色标明) 分辨率   比例 | 设备尺寸 1024*500 (8.9寸) 1024*768 (比例4:3  | 10.4寸.12.1寸.14.1寸.15寸; ) 1280*800(16:10  |15.4寸) 1280*1024(比例:5:4  | 14.1寸.15.0寸) 1280*854(比例:15:10 | 15.2) 1366*768 (比例:16:9 | 不常见) 1440*900 (16:10  17寸 仅苹果用) 144…

1.<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no"> viewport:视图窗口,width:视口内容宽度  initial-scale:初始时比例,不进行缩放,user-scalable=no 禁止用户触屏缩放屏幕 2.避免使用绝对单位如(px),应该使用相对单位(%,em,rem),使用流式布局,使用响应式图片. 3.Med…

Media Queries,其作用就是允许添加表达式用以确定媒体的环境情况,以此来应用不同的样式表.换句话说,其允许我们在不改变内容的情况下,改变页面的布局以精确适应不同的设备. 媒体查询有两种玩法,第一种,直接在link中判断设备的尺寸,然后引用不同的css文件 <link rel="stylesheet" type="text/css" href="styleA.css" media="screen and (min-widt…

如何通过CSS3 实现响应式Web设计: 分为三个步骤:(1)允许网页宽度自动调整.首先在页面头部中,我们需要加入这样一行:<meta name="viewport" content="width=device-width, initial-scale=1" />  viewport是网页默认的宽度和高度,网页的宽度默认就等于自己屏幕宽度(width=device-width),并且原始缩放比例(initial-scale=1)为1.0,也就是网页初始大…

css014 响应式web设计 一.    响应式web设计基础知识 1.rwd的三大理念:a.用于布局的弹性网络, b.用于图片和视频的弹性媒体,c.为不同屏幕宽度创建的不同样式的css媒体查询. 二.    为RWD构建网页 1.            手机浏览器中为了忽略手机浏览器屏幕变小字体也变小的行为,可在head中添加一行代码: <meta name="viewport" content="width=vedice-width"> 最好是添加…

本文来自我的前端博客,原文地址:http://www.hacke2.cn/about-responsive/ 跨终端时代的到来 当你乘坐各种交通工具(公交.地铁.轻轨.火车)时你会发现,人们都个个低下头在玩自己的手机.平板.Kindle,没错,你正在处于一个多终端设备的时代!手机用户连年上升,前几天我们在感叹以前玩沙包.陀螺,现在小孩的娱乐就是玩手机–.另外,微软的Xbox和任天堂的Wii等游戏设备也有自己的浏览器.设备真的来了.. 现在网站主流跨终端的有以下方式: 单域 比如前端乱炖和我的个人…

基于浮动的布局: 1.除非图片设置了宽度,否则始终应该要对浮动的图片设置一个宽度,这样可以让浏览器给其他内容腾出环绕的空间 2.当侧边栏的高度与主内容区的高度不一致的时候,可以用个margin进行调整 3.在一个非浮动元素<div>中存在一个浮动元素,当浮动元素高于元素本身的时候,内容就会溢出<div>中,解决方案如下: A:在</div>介绍之前添加一个换行,并且添加一个类<br class=”clear”/>,之后创建一个样式br.class{clear…