paip.自适应网页设计 跟 响应式 设计方法与工具补充(2)o54
paip.自适应网页设计 跟 响应式 设计方法与工具补充(2)o54
#-----响应式 设计框架
Bootstrap比较热门.
Foundation
号称是世界上最先进的响应式前端框架。
#---绝对不要使用相对地高度...只使用相对地宽度..特别大的布局上...
#----------字体的自适应vw
使用em好像不生效...
使用vw走ok.... font-size: 4vw; 适合320*480-----600*900等...
顺便,要有个vmin,最小字体了.贝儿.太小李看不见..
手动大小窗口,都能自己适合了..
作者 老哇的爪子 Attilax 艾龙, EMAIL:1466519819@qq.com
转载请注明来源: http://blog.csdn.net/attilax
#---------响应式设计的工具ff29
web tool里面有个响应式设计的工具,能调整web界面大小..通常的320*480-----600*900等都有..轻松的...
贝儿就要外面儿套个边框了....
#----media query的使用方法
一、判断媒体类型,引用不同的样式表
<link rel=”stylesheet” media=”screen and (判断条件)” herf=”需要调用的样式表文件” />
通过设定屏幕的判断条件,调用对应的css文件。该实例多用于整页面不同风格的css调用与选取,使用该方法可能需要为一个页面制作多份个css文件。
二、判断媒体类型,执行不同的css样式属性
@media screen and (max-width:240px){
.box{width:200px;}
.title{color:red;}
}
@media screen and (min-width: 355px) and (max-width:400px)
{}
上述实例可以出现在外部样式表与内部样式表中。直接在样式表中以@media screen属性标注媒体类型的判断事件,
@media screen and (min-width:1200px)
#------------响应式图片:
响应式图片技术思想:不仅要同比的缩放图片,还要在小设备上降低图片自身的分辨率。这个技术的实现需要使用几个相关文件,我们可以在Github上获取。包括一个JavaScript文件(rwd-images.js),一个.htaccess文件,以及一些范例资源文件。大致的原理是,rwd-images.js会检测当前设备的屏幕分辨率,如果是大屏幕设备,则向页面head部分中添加BASE标记,并将后续的图片、脚本和样式表加载请求定向到一个虚拟路径"/rwd-router"。当这些请求到达服务器端,.htacces文件会决定这些请求所需要的是原始图片还是小尺寸的"响应式图片",并进行相应的反馈输出。对于小屏幕的移动设备,原始尺寸的大图片永远不会被用到。
paip.自适应网页设计 跟 响应式 设计方法与工具补充(2)o54的更多相关文章
- paip.自适应网页设计 跟 响应式 设计的区别跟原理and实践总结
paip.自适应网页设计 跟 响应式 设计的区别跟原理and实践总结 响应式Web设计(Responsive Web design)的理念是: 1 #-----------自适应布局VS响应式布局 2 ...
- Responsive设计 (响应式设计)
一.什么是响应式设计 维基百科是这样对响应式作的描述:“Responsive设计简单的称为RWD,是精心提供各种设备都能浏览网页的一种设计方法,RWD能让你的网页在不同的设备中展现不同的设计风格.” ...
- 什么是响应式设计?响应式设计的基本原理是什么?如何兼容低版本的 IE?
响应式网站设计(Responsive Web design)的理念是:集中创建页面的图片排版大小,可以智能地根据用户行为以及 使用的设备环境(系统平台.屏幕尺寸.屏幕定向等)进行相对应的布局,无论用户 ...
- 移动端和pc端,响应式设计布局
1.什么是响应式 Web 设计? 响应式 Web 设计让你的网页能在所有设备上有好显示. 响应式 Web 设计只使用 HTML 和 CSS. 响应式 Web 设计不是一个程序或Javascript脚本 ...
- Grid – 入门必备!简单易懂的响应式设计指南
如今,人们使用各种各样的移动设备访问网页,设计师们需要去适配不同的屏幕,让用户在都能有最佳的浏览体验.Grid 是一个简单的响应式设计指南,按照这些简单的步骤,你的就能够掌握基础的响应网页设计技巧. ...
- 企业级的响应式设计(Responsive design at enterprise level)译
导言 响应式设计是现在人们谈论的热点,但如何部署,特别是在有多种设备的大型项目中如何组织响应式设计,响应式设计和可伸缩性(Scalable)有什么区别?这都是需要解决的难题. 优化用户经验——Opti ...
- 响应式设计:理解设备像素,CSS像素和屏幕分辨率
概述 屏幕分辨率.设备像素和CSS像素这些术语,在非常多语境下,是可互换的,但也因此easy在有差异的地方引起混淆,实际上它们是不同的概念. 屏幕分辨率和设备像素是物理概念,而CSS像素是WEB编程的 ...
- paip.自适应网页设计 同 响应 与设计的原理的差and实践总结
paip.自适应网页设计 同 响应 与设计的原理的差and实践总结 响应式Web设计(Responsive Web design)的理念是: 1 #-----------自适应布局VS响应式布局 2 ...
- FLASH CC 2015 CANVAS (四)制作响应式设计(自适应)的项目
注意 此贴 为个人边“开荒”边写,所以不保证就是最佳做法,也难免有错误(如果发现我会更新文章)! 正式教程会在后续开始更新 相信你在看了(第二节)(第三节)之后已经能够满足绝大多数的互动需求了.那么也 ...
随机推荐
- C语言学习笔记(一)_hello world
一.建立一个文件a.c,写入: #include <stdio.h> //使用printf库函数之前,必须include <stdio.h>int main()//main函数 ...
- JAVA中implements的用法
implements使用 interface Sport { void run(); void jump(); } class Athlete implements Sport { public vo ...
- hdu 5791 (DP) Two
hdu 5791 Two Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 65536/65536 K (Java/Others)Tota ...
- Xshell连接Linux下Oracle无法回退的解决办法
使用Xshell 连接远程Linux 数据库服务器,当切换到sqlplus 控制台时,输入错误字符的时候,使用回退键修改时,显示^H. 解决方法: 在控制太命令中输入stty erase ^H 回车就 ...
- 学习Linux所需软件
一: VMware虚拟机 二:VMware_Install_Cleaner 虚拟机卸载 三:XShall
- [转]linux14.04下caffe的安装步骤
linux14.04下caffe的安装步骤 原文地址:http://blog.csdn.net/xiaoyang19910623/article/details/52997481?locatio ...
- aix DNS 配置以及网络命令traceroute和nslookup 和 dig 命令
DNS 域名系统 (DNS) 服务器将 IP 地址解释为其他计算机或网站的域名和地址.如果没有 DNS,您需要在 Web 浏览器中输入 IP 地址.例如,如果您未访问 DNS 并希望查看 IBM 的网 ...
- IOS CoreText.framework --- 行 CTLineRef
http://blog.csdn.net/fengsh998/article/details/8701738 前面两篇文章介绍了文字的样式,段落样式.本文章主要介绍行模式.CTLineRef 知识了解 ...
- 20145225《Java程序设计》 实验四 Android开发基础
20145225<Java程序设计> 实验四 Android开发基础 实验报告 实验内容 安装Android Studio 运行安卓AVD模拟器 使用安卓运行出虚拟手机并显示HelloWo ...
- SpringMVC+MyBatis项目分析与开发实例
一.用到的Jar包 <!-- ************ Spring测试包 ************* --><artifactId>spring-test</artif ...