精华内容
下载资源
问答
  • 响应式设计
    千次阅读
    2021-04-18 22:52:11

    在这里插入图片描述
    是什么
    响应式网站设计(Responsive Web design)是一种网络页面设计布局,页面的设计与开发应当根据用户行为以及设备环境(系统平台、屏幕尺寸、屏幕定向等)进行相应的响应和调整

    描述响应式界面最著名的一句话就是“Content is like water”

    大白话便是“如果将屏幕看作容器,那么内容就像水一样”

    响应式网站常见特点:

    同时适配PC + 平板 + 手机等

    标签导航在接近手持终端设备时改变为经典的抽屉式导航

    网站的布局会根据视口来调整模块的大小和位置

    在这里插入图片描述
    实现方式
    响应式设计的基本原理是通过媒体查询检测不同的设备屏幕尺寸做处理,为了处理移动端,页面头部必须有meta声明viewport

    属性对应如下:

    width=device-width: 是自适应手机屏幕的尺寸宽度

    maximum-scale:是缩放比例的最大值

    inital-scale:是缩放的初始化

    user-scalable:是用户的可以缩放的操作

    实现响应式布局的方式有如下:

    媒体查询
    百分比
    vw/vh
    rem
    媒体查询
    CSS3 中的增加了更多的媒体查询,就像if条件表达式一样,我们可以设置不同类型的媒体条件,并根据对应的条件,给相应符合条件的媒体调用相对应的样式表

    使用@Media查询,可以针对不同的媒体类型定义不同的样式,如:

    @media screen and (max-width: 1920px) { … }
    当视口在375px - 600px之间,设置特定字体大小18px

    @media screen (min-width: 375px) and (max-width: 600px) {
    body {
    font-size: 18px;
    }
    通过媒体查询,可以通过给不同分辨率的设备编写不同的样式来实现响应式的布局,比如我们为不同分辨率的屏幕,设置不同的背景图片

    比如给小屏幕手机设置@2x图,为大屏幕手机设置@3x图,通过媒体查询就能很方便的实现

    百分比
    通过百分比单位 " % " 来实现响应式的效果

    比如当浏览器的宽度或者高度发生变化时,通过百分比单位,可以使得浏览器中的组件的宽和高随着浏览器的变化而变化,从而实现响应式的效果

    height、width属性的百分比依托于父标签的宽高,但是其他盒子属性则不完全依赖父元素:

    子元素的top/left和bottom/right如果设置百分比,则相对于直接非static定位(默认定位)的父元素的高度/宽度

    子元素的padding如果设置百分比,不论是垂直方向或者是水平方向,都相对于直接父亲元素的width,而与父元素的height无关。

    子元素的margin如果设置成百分比,不论是垂直方向还是水平方向,都相对于直接父元素的width

    border-radius不一样,如果设置border-radius为百分比,则是相对于自身的宽度

    可以看到每个属性都使用百分比,会照成布局的复杂度,所以不建议使用百分比来实现响应式

    vw/vh
    vw表示相对于视图窗口的宽度,vh表示相对于视图窗口高度。 任意层级元素,在使用vw单位的情况下,1vw都等于视图宽度的百分之一

    与百分比布局很相似,在以前文章提过与%的区别,这里就不再展开述说

    rem
    在以前也讲到,rem是相对于根元素html的font-size属性,默认情况下浏览器字体大小为16px,此时1rem = 16px

    可以利用前面提到的媒体查询,针对不同设备分辨率改变font-size的值,如下:

    @media screen and (max-width: 414px) {
    html {
    font-size: 18px
    }
    }

    @media screen and (max-width: 375px) {
    html {
    font-size: 16px
    }
    }

    @media screen and (max-width: 320px) {
    html {
    font-size: 12px
    }
    }
    为了更准确监听设备可视窗口变化,我们可以在css之前插入script标签,内容如下:

    //动态为根元素设置字体大小
    function init () {
    // 获取屏幕宽度
    var width = document.documentElement.clientWidth
    // 设置根元素字体大小。此时为宽的10等分
    document.documentElement.style.fontSize = width / 10 + ‘px’
    }

    //首次加载应用,设置一次
    init()
    // 监听手机旋转的事件的时机,重新设置
    window.addEventListener(‘orientationchange’, init)
    // 监听手机窗口变化,重新设置
    window.addEventListener(‘resize’, init)
    无论设备可视窗口如何变化,始终设置rem为width的1/10,实现了百分比布局

    除此之外,我们还可以利用主流UI框架,如:element ui、antd提供的栅格布局实现响应式

    小结
    响应式设计实现通常会从以下几方面思考:

    弹性盒子(包括图片、表格、视频)和媒体查询等技术
    使用百分比布局创建流式布局的弹性UI,同时使用媒体查询限制元素的尺寸和内容变更范围
    使用相对单位使得内容自适应调节
    选择断点,针对不同断点实现不同布局和内容展示
    三、总结
    响应式布局优点可以看到:

    面对不同分辨率设备灵活性强
    能够快捷解决多设备显示适应问题
    缺点:

    仅适用布局、信息、框架并不复杂的部门类型网站
    兼容各种设备工作量大,效率低下
    代码累赘,会出现隐藏无用的元素,加载时间加长
    其实这是一种折中性质的设计解决方案,多方面因素影响而达不到最佳效果
    一定程度上改变了网站原有的布局结构,会出现用户混淆的情况

    更多相关内容
  • 响应式设计

    2021-06-09 14:45:18
    响应式网站设计(Responsive Web design)的理念是:集中创建页面的图片排版大小,可以智能地根据用户行为以及使用的设备环境(系统平台、屏幕尺寸、屏幕定向等)进行相对应的布局。
  • 源码简介与安装说明: TooNaughty网址... 特点: 纯净的导航界面(去繁求简) 响应式设计的前端设计 聚合式搜索框(一键切换百度,搜狗,360,必应搜索平台) 用户可自行申请收录,由管理员后台审核 文章管理发布...
  • 你可以轻易找到许多如何设置响应式设计响应点的攻略,但是这些过时的设计方法都是以主流屏幕尺寸为依据的,效果并不理想。其实并没有“主流”屏幕尺寸这一概念。另外一个主流的方法是当布局被打破时设置响应点。这个...
  • 都说2013年将是响应式设计爆发的一年。一淘设计团队在去年一淘首页改版时初步尝试了响应式,最近在一淘“玩客”项目中有了更加深入地应用,第一次在复杂产品中实现了全站响应式。中间积累了一些经验也踩了不少坑,...
  • EthanMarcotte称响应式设计是基于网格建立一个网站。Marcotte定义这项技术后,响应式设计框架开始出现,主要是css和JavaScript的结合。许多框架都是开源的,可以免费下载和快速定制。当下最火热的框架就是Bootstrap...
  • 而随着响应式设计越来越流行,CSS在响应式设计中已扮演着举足轻重的角色,在进行响应式设计时,倘若你能掌握一些CSS技巧,将大大提高你的工作效率。本文将介绍一些CSS设计技巧,包括取消下划线、设计响应式视频、...
  • 都说2013年将是响应式设计爆发的一年。一淘设计团队在去年一淘首页改版时初步尝试了响应式,最近在一淘“玩客”项目中有了更加深入地应用,第一次在复杂产品中实现了全站响应式。中间积累了一些经验也踩了不少坑,...
  • 这篇文章的内容将涉及移动网页与响应式设计的关系,始于如何提供灵巧的响应式设计,及移动端的性能为何如此重要、响应式设计何以不能视为网站的目标,并止于技术本身的性能争议,以便辅助理解问题的真正所在。...
  • 网上发现的,觉得不错的响应式设计css+兼容手机+平板+电脑PC 跨屏响应式布局前端开发CSS框架,
  • 我保证你通过三步就可以学会响应式设计的基本逻辑和媒体查询(media query)(假设你有基本的CSS知识)。 第一步:Meta标签(看demo)  大部分移动浏览器会把HTML页面缩放成较宽的viewport的宽度,这样内容就可以屏幕上...
  • 从2012年开始到2014年,各大家对Web设计的趋势预测中,都提到响应式设计;2015年网页设计趋势预测中,响应式仍在继续。这个经历了几年依然大热的响应式,在过去的几年里,快速巩固了自己的地位,并掀起了一股网页...
  • 响应式的设计现在越来越受设计师推崇,面对这越来越多的响应式设计页面,我们需要找到高效的测试工具来验证设计的合理和正确,在今天这篇文章中,我们将介绍16款帮助你在线测试响应式页面设计的工具,希望大家喜欢!...
  • 响应式设计企业网站模板是一款基于Bootstrap框架企业网站模板Owkey。提示:本模板调用到谷歌字体库,可能会出现页面打开比较缓慢。
  • AdminEx - 响应式设计后台管理模版
  • Thinkphp响应式设计印刷广告公司网站模板
  • 响应式web设计

    2018-12-20 22:10:30
    响应式web设计 html css javascript 图灵设计丛书。。
  • 响应式设计seo整站模板
  • 响应式设计的常用方法

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 337,717
精华内容 135,086
关键字:

响应式设计

友情链接: 飞机大战.zip