web前端响应式
一、响应式概述:
不仅仅是通过屏幕尺寸来动态改变页面容器的宽度等,完整的响应式网站的实现需要考虑到这些问题:响应式布局、响应式html和css、响应式媒体、响应式javascript。
二、移动端布局控制:
使用 viewport标签在手机浏览器上控制布局控制不缩放等通用定义。(用到PC端不影响)
<meta name="viewport" content="width=device-width,initial-scale=1, maximum-scale=1" /> <meta name="apple-mobile-web-app-status-bar-style" content="blank" />
三、普通元素的栅格布局:
.row{ width: 100%; } .row .col-1 { width: 8.33333333333% } .row .col-2 { width: 16.6666666667% } /* ...比较多,这里省略 */ .row .col-12 { width: 100% }
四、不同设备元素容器布局:
通用栅格布局并不能解决我们全部的问题,例如某个页面板块列表,PC端一排展示4个,移动端一排展示2两个,使用栅格的话我们就需要重新定义.col-3和.col-6了。对于这种情况我们的处理方法也比较简单 对于移动端浏览器,通过简单的js逻辑判断,在html的body中加入mobile的内容,在body里面的相同元素使用不同的宽度布局的方式。这种方式订制化坚强,如果宽度布局用的不多,即可以使用这种不同宽度布局的方式来实现。这样就实现了一个普通div在移动端和PC端的不同布局。
.container{ width: 25%; } .mobile .container{ width: 50%; }
五、响应式html与css:
1、CSS文件,分开两种,一个是移动端,另一个是PC端
2、动态使用js渲染不同内容
六、响应式媒体
1、使用css背景图片 (依赖media query)
2、picture element (依赖浏览器新特性+midea query)
3、adaptive-images http://adaptive-images.com/
4、responsive-images.js(依赖js) https://github.com/kvendrik/responsive-images.js
<img alt='kitten!' data-src-base='demo/images/' data-src='<480:smallest.jpg, <768:small.jpg,<960:medium.jpg,>960:big.jpg' />
七、不同屏幕分辨率自适应方案
主要是解决高清屏(retina屏)的问题,由于高清屏与普通屏幕有所区别:
由于高清屏的特性,1px是由2×2个像素点来渲染,那么我们样式上的border:1px在Retina屏下会渲染成2px的边框,与设计稿有出入,为了追求1px精准还原,我们就不得不拿出一个完美的解决方案。(此处没去深究)JS检测是否高清屏:var retina = window.devicePixelRatio > 1; 例如一个边框的
@media only screen and (-webkit-min-device-pixel-ratio:2), only screen and (min-device-pixel-ratio:2) { button { border:none; padding:0 16px; background-size: 50% 50%; }
web前端响应式的更多相关文章
- web前端响应式布局,自适应全部分辨率
写phpd的我. 近期公司要弄个app关键是没有web开发,而我有比較闲,那就扛枪上阵吧. 响应式布局,web端的?php我一直都是用tp框架,对于web首先想到的是bootstrap框架.仅仅是简单 ...
- WEB前端响应式布局之BootStarp使用
1.Bootstrap简介:1. 概念: 一个前端开发的框架,Bootstrap,来自 Twitter,是目前很受欢迎的前端框架.Bootstrap 是基于 HTML.CSS.JavaScript 的 ...
- web前端----响应式布局
响应式开发 为什么要进行响应式开发? 随着移动设备的流行,网页设计必须要考虑到移动端的设计.同一个网站为了兼容PC端和移动端显示,就需要进行响应式开发. 什么是响应式? 利用媒体查询,让同一个网站兼容 ...
- 前端响应式设计中@media等的相关运用
现在做前端响应式网站特别,响应式成为现在前端设计一个热点,它成为热点的最主要的原因就是,移动端设备屏幕的种类多样,那么如何设置响应式屏幕. /*打印样式*/ @mediaprint{color:red ...
- 15个最好的HTML5前端响应式框架(2014)
文中的多个框架基于SASS创建,SCSS是一种比LESS更简洁的样式表编程语言,它能够编绎成CSS,可复用CSS代码,声明变量,甚至是函数,类Ruby/Python的语法.參见: LESS vs SA ...
- 移动Web之响应式布局的探讨
响应式布局的探讨 响应式布局的两种方式 基于百分比的布局 例:Bootstrap 基于rem的布局 例:淘宝触屏版 这两种布局都需要依赖于CSS3的media query来设置布局断点(或者通过js监 ...
- web app响应式字体设置!rem之我见
之前做沙漠教育的时候,直接以设计图为准,然后强暴式,缩放处理.简单.直接,粗暴!但是,开发快.……一劳永逸! 但那是,现在开发,作为业界良心:是不能那么做的!(那个是被逼的啊 首先看代码: @medi ...
- 移动web之响应式布局
1.响应式布局的概念 响应式布局是Ethan Marcotte在2010年5月份提出的一个概念.简而言之.就是一个站点可以兼容多个终端--而不是为每一个终端做一个特定的版本号. 这个概念是为解决移动互 ...
- 移动web——bootstrap响应式轮播图
基本介绍 1.bootstrap有轮播图的模板,我们只需要改动下就行. 2.这里我们将介绍桌面版本和移动版本最后是综合版本 桌面版本 1.这里的图片设置是有窍门的,不再去添加img标签,而是作为a标签 ...
随机推荐
- ASP.NET Repeater 控件分页
protected void Page_Load(object sender, EventArgs e) { HttpContext context = HttpContext.Current; co ...
- 将string转换成char* (转)
原文:http://blog.sina.com.cn/s/blog_786ce14d01014lpr.html string 是c++标准库里面其中一个,封装了对字符串的操作把string转换为cha ...
- PSP(16/03/14-16/03/15)
//整理了自己过去的时间记录文件,最早用电子版记录是15/04/21,依旧断断续续记录到15/11/21,每月至少三次记录,然而自己并没有对数据进行整理,只是纯粹记录,真是浪费了花在上面的时间.期间八 ...
- mac中使用brew安装软件,下载太慢怎么办?
mac中使用brew安装软件,下载太慢怎么办? 本文所说的软件是指较大的软件,如果软件较小,例如软件只有几M,那么使用此方法后,提升会非常小. 了解brew原理: 1: 从网络下载安装包 2: 执行一 ...
- rtpMIDI Tutorial
Tobias Erichsen private stuff & software for audio, midi and more Search Main menu Skip to prima ...
- Discuz 7.0版块横排显示版块图标和版块简介的方法
Discuz 7.0版块横排显示版块图标和版块简介的方法 最近很多朋友咨询Discuz论坛设置论坛版块横排后,如何设置显示版块图标和简介的问题. 一.显示板块图标 找到templates\defaul ...
- jQuery取得select 选中值和文本 来自园友“大气象”
本来以为jQuery("#select1").val();是取得选中的值, 那么jQuery("#select1").text();就是取得的文本. 这是不正确 ...
- Linux学习之路—Linux的历史发展
1.1969年以前:一个伟大的梦想-Bell,MIT与GE的"Multics"系统 由于早期的计算机不想现在这样普遍,所以往往出现这样的情况,主机只有一台而多人等待使用.好在20世 ...
- OpenStack虚拟机DHCP获取不到IP地址排查
版本:OpenStack Liberty Neutron DVR 现象: 1.在虚拟机内部不停地dhclient 2.在虚拟机所属的计算节点的物理网卡上抓包,发现该虚拟机发出的dhcp广播包 3.在虚 ...
- Egit Patch
Git为我们提供了Patch功能,Patch中包含了源码更改的描述,能够应用于其他Eclipse工作空间或者Git仓库.也就是说,可以将当前提交导出至其他分支或者项目中. 举个例子,项目A.B中使 ...