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标签 ...
随机推荐
- soj1001算法分析
题目简单描述: 给定一个长数串,输出可能的字母串解个数.(A对应1,Z对应26) 样例输入:25114 样例输出:6 样例解释:可能的字母串解:YJD.YAAD.YAN.BEJD.BEAAD.BEAN ...
- 推荐一些不错的计算机书籍(php c mysql linux等等)
推荐一些不错的计算机书籍. # PHP<PHP程序设计>(第2版) --PHP语法和入门最好的书<PHP5权威编程> --PHP入门后升级书<深入PHP:面向对象.模 ...
- iar 问题
我的笔记本是win10 之前用的iar 430 版本是5.5 都没有问题.但,突然就
- Norm and Sparse Representation
因为整理的时候用的是word, 所以就直接传pdf了. 1.关于范数和矩阵求导.pdf 参考的主要是网上的几个博文. 2.稀疏表示的简单整理.pdf 参考论文为: A Survey of Sparse ...
- PP读取生产订单状态
转自http://blog.csdn.net/heng0757/article/details/6656089 传递订单号码,可以返回该订单的状态 REPORT ZCMH2.TABLES : JES ...
- 【转】CSS设置DIV背景色渐变显示
[原链接]http://www.2cto.com/kf/201310/248187.html <style type="text/css"> .linear{ ...
- 关于 ant 不同渠道自动打包的笔记
必要的java.android.ant文件及循环打包用到的ant的jar 下载Ant(这里的Ant不是eclipse和android SDk里面自带的ant) 官方下载地址:http://a ...
- xxxxxxx
int c; int b; bool h;
- SVN-Server搭建及配置
SVN是Subversion的简称,是一个开放源代码的版本控制系统,相较于RCS.CVS,它采用了分支管理系统,它的设计目标就是取代CVS.互联网上很多版本控制服务已从CVS迁移到Subversion ...
- 素数方阵的工程ing
2016 12 12 16 12 开始 2016 12 13 17 30 还没开打 2017 1 3 ..... 一星期前貌似打完了... 如下 #include<iostream> ...