响应式一些知识

1,什么是媒体查询,媒体查询的优缺点
media queries 媒体查询
媒体查询表达式,指定媒体类型,根据媒体类型来选择相应的样式,在样式中,
选择一种页面的布局以精确地适应不同的设备

我们要做的就是针对不同的浏览器设备大小,编写不同的样式,让浏览器根据不同的窗口尺寸大小,选择不同的样式

IE8 以下不支持媒体查询
responsivator 工具
通过服务器判断,选择不同的页面,缺点页面风格修改复杂

2,

@media 设备类型 only() not() and (),设备二{}
<meta name="viewport" content="width=device-width; initial-scale=1.0" />

响应式网站设计需求
1,确定需要兼容的设备类型、屏幕尺寸
包括横向和竖向
2,制作线框原型
页面的布局如何变化,内容的删减啊,有没有特殊性的设计,需要前端和设计保持沟通
3,测试线框原型
可以帮助我们尽早发现可访问性
4,视觉设计
注意:保证内容文字的可读性、控件可点击区域面积等
5,前端实现
响应式页面的特殊性,最终的产出可能会和设计稿出入较大,需要前端开发人员和设计师沟通,所以最好,设计的时候就考虑这些情况

响应式web设计

1,响应式元素和媒介
height:auto,是指根据块内内容自动调节高度。
height:100%,是指其相对父块高度而定义的高度,也就是按照离它最近且有定义高度的父层的高度来定义高度。

2,媒体查询 orientation:portrait | landscape
portrait:        指定输出设备中的页面可见区域高度大于或等于宽度        竖屏(手机正常下)
landscape:        除portrait值情况外,都是landscape                    横屏

时间: 2024-10-10 19:37:00

响应式一些知识的相关文章

响应式基本知识

1.pixel像素基础 1.px:csspixel 逻辑像素,浏览器所使用的抽象单位 2.dp,pt:设备无关像素 3.devicePixelPatio 设备像素缩放比例 2.viewport 1. ios的viewport是980px;普遍 2.安卓不一定 注:为什么不使用默认的980px的布局viewport 原因: 宽度不可控制,不同的系统设备的默认值都可能不同 页面缩小版显示,交互性不友好 链接不可点 有缩放,缩放后又有滚动 例如font-size为40px等于pc上12px同等物理大小

【CSS-移动端响应式布局详解】

背景 移动端响应式布局开发主要方案有: 基于rem开发 基于媒体查询 基于弹性盒 基础概念 在讨论响应式布局知识前,先了解下移动端常用基础概念. 逻辑像素(CSS pixels) 浏览器使用的抽象单位,主要用来在网页上绘制内容:通常在我们实际开发中涉及到的CSS单位px都是指逻辑像素. 设备像素或物理像素(Device Pixels) 显示屏幕的最小物理单位,每个DP包含自己的颜色.亮度.等值的 CSS pixels在手机屏幕上占多大的位置,这不是固定的,这取决于很多属性:经过分析和总结,我们可

html5/css3响应式页面开发总结

一,自适应和响应式的区别 自适应是一套模板适应所有终端,但每种设备上看到的版式是一样的,俗称宽度自适应. 响应式一套模板适应所有终端,但每种设备看到的版式可以是不一样的. 虽然响应式/自适应网页设计会带来兼容各种设备工作量大.代码累赘.加载时间长的缺点,但它们跨平台和终端,能"一次设计,普遍适用",可以根据屏幕分辨率自适应以及自动缩放图片.自动调整布局,它们不只是技术的实现,更多的是对于设计的全新思维模式. 很多网站的解决方法,是为不同的设备提供不同的网页,比如专门提供一个mobile

前端知识解惑: 响应式 兼容性 不错的知识链接

1.设备像素(device pixel) 指的是设备中使用的物理像素. iphone5 640x1136px 2.css像素(css pixel) 逻辑像素   px:相对单位,相对的是设备像素(device pixel),所以相同的值在不同的屏幕上的大小是不同的哦. 3.Retina视网膜屏幕    ppi > 320 4.ppi:每英寸像素,每英寸所拥有的像素数目. 低密度 中密度 高密度 超高密度: ppi > 320:retina 视网膜屏 5.设备像素比:device pixel r

响应式布局的基础知识

响应式设计(布局): 出发点挺好,实际用起来非常不方便 1.大多数手机width=320px 2.大多数pad的width=1024px 媒体查询缺点: 1.流量非常浪费 2.少部分手机的分辨率不统一——非常乱 3.除了媒体查询,有更简单的方法——没必要media  媒体查询 @media screen ...... @media screen and (max-width:380px){   div{background:red;}}@media screen and (min-width:3

任务八:响应式网格(栅格化)布局

任务目的 使用 HTML 与 CSS 实现类似 BootStrap 的响应式 12 栏网格布局,根据屏幕宽度,元素占的栏数不同. 任务描述 需要实现如 效果图 所示,调整浏览器宽度查看响应式效果,效果图中的红色的文字是说明,不需要写在 HTML 中. 任务注意事项 网格布局的作用在于更有效地控制元素在网页中所占比例的大小.比如,博客中有一个留言板模块,在比较大的屏幕上,我们希望它占了右边 25% 的宽度,在手机等比较小的屏幕上,我们希望它占 100% 的宽度,出现在博客文章下方.网格布局是一种实

响应式下的雪碧图解决方案

一.概述 在传统的居中布局时,我们常用background-position这个属性来进行雪碧图的定位,在减少数据量的同时,保证准确定位.在移动端使用越来越重的现在,以往的传统定位,已经无法达到目的,那么是否有合适的解决方案呢?答案是有的,让我们先来了解background的两个属性: background-position:背景图片相对容器原点的起始位置.详解可以查看另一篇博客:background-position 详解. background-size: 规定背景图的尺寸: 语法:back

基于ASP.NET MVC和Bootstrap搭建响应式个人博客站

1.0 为什么要做这个博客站? www.zynblog.com 在工作学习中,经常要搜索查找各种各样的资料,每次找到相关资料后都会顺手添加到浏览器书签中,时间一长,书签也就满了.而且下次再点击这个书签时,可能 就会忘记当时为什么要添加这个书签了,更有可能书签连接已经无效.这样一来,也就不方便自己查阅了.如果转载.收藏到自己的博客园账号中.CSDN账号 中,脚本之家中,知乎中等等,依然是很凌乱,不方便下次查阅. 因此,我下决心开发一个个人技术博客站.主要原因是:可以整合各种宝贵资源,将知识变为宝库

css014 响应式web设计

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