精华内容
下载资源
问答
  • 什么是响应式开发

    2018-03-20 20:27:00
    响应式开发是前端开发工作比较常见的工作内容,随着移动端的发展,网页设计必须考虑到移动端的设计,同一个网站为了兼容PC端和移动端显示,响应式开发是前端开发人员必备的技术,所以响应式开发的技术必须掌握。...

    响应式开发是前端开发工作比较常见的工作内容,随着移动端的发展,网页设计必须考虑到移动端的设计,同一个网站为了兼容PC端和移动端显示,响应式开发是前端开发人员必备的技术,所以响应式开发的技术必须掌握。

    什么是响应式

    顾名思义,同一个网站兼容不同的大小的设备。如PC端、移动端(平板、横屏、竖排)的显示风格。

    1. Media Query(媒体查询)

    <media=”screenand(max-device-width:400px)” href=”tinyScreen.css”/>

    2. 使用em或rem做尺寸单位

    用于文字大小的响应和弹性布局。

    3. 禁止页面缩放

    1. <meta name="viewport" content="initial-scale=1, width=device-width, maximum-scale=1, user-scalable=no" />  

    4. 屏幕尺寸响应

    a)  固定布局:页面居中,两边留白,他能适应大于某个值一定范围的宽度,但是如果太宽就会有很多留白,太窄会出现滚动条,在PC页面上很常见。

    b)  流动布局:屏幕尺寸在一定范围内变化时,不改变模块布局,只改变模块尺寸比例。比固定布局更具响应能力,两边不留白,但是也只能适应有限的宽度变化范围,否则模块会被挤(拉)得不成样子。

    c)  自定义布局:上面几种布局方式都无法跨域大尺寸变化,所以适当时候我们需要改变模块的位置排列或者隐藏一些次要元素。

    d)  栅格布局:这种布局方式使得模块之间非常容易对齐,易于模块位置的改变用于辅助自定义布局。

    5、不使用绝对宽度

    转载于:https://www.cnblogs.com/xiaoan0705/p/8612317.html

    展开全文
  • Bootstrap响应式网站开发;Bootstrap响应式网站开发;Bootstrap响应式网站开发;Bootstrap响应式网站开发;Bootstrap响应式网站开发;Bootstrap响应式网站开发;Bootstrap响应式网站开发;Bootstrap响应式网站开发;...
  • 响应式开发

    2019-11-30 19:13:33
    浏览器的兼容性浏览器响应式开发的关键 IE占有率已经低于10% 微信浏览器的内核使用的X5的内核 响应式开发 1.什么是响应式网站? 以弹性为基础(弹性布局)——》向响应式发展(引入媒介查询 media query) 无论...

    statcounter
    浏览器的兼容性是浏览器响应式开发的关键

    IE占有率已经低于10%
    微信浏览器的内核使用的是X5的内核

    响应式开发
    1.什么是响应式网站?
    以弹性为基础(弹性布局)——》向响应式发展(引入媒介查询 media query)
    无论在分辨率如何,都可以完美的呈现页面

    流动网格,弹性图片,媒体查询
    
    响应式网站是一个设计理念,他是多项技术的综合体
    
    响应式网站的优点:
    1.减少工作量(网站,设计代码内容都只需要yife;秩序在JS脚本,css样式做一些改动)
    2.节省时间
    3.每个设备都能得到正确的设计
    4.搜索优化
    响应式网站的缺点:
    1.回家再更多 的样式和脚本资源
    2.设计比较难精确定位盒控制
    3.老版本的兼容性不好
    
    
    媒体查询(常用的属性 width:视口的宽度;height:视口的高度;device-width:渲染的宽度,即设备屏幕的
    

    宽度 ;device-height:渲染的高度,及设备屏幕的高度)

    viewport
    1.布局视口
    2. 可视视口(只需知道其存在即可)
    3.理想视口(理想视口就是布局视口在一个设备上的最佳尺寸,理想视口下的页面便于浏览器浏览,阅读)
    wile构建手机浏览器优化的页面而添加的。

    禁用了用户的缩放
    怎么样分析设计图
    1.和设计师交流网站如何交互
    2.是否有相应的设计规范(字体,颜色,字号,间距等)
    3.什么地方必须还原100% ,什么地方可以灵活处理	
    

    响应式网站设计实践原则
    1.渐进增强
    2.优雅降级
    断点的选择
    2.如何从零始编写响应式网站
    3.开发过程中有哪些前沿,主流的技术
    4.网站开发必备知识的讲解

    humans.txt
    robots.tex 搜索引擎
    404html
    .editorconfig
    .gitignore 告诉编译器哪些文件不需要添加到版本管理中
    LICENSE.txt 许可协议
    README.md 项目简介,使用法师,相关链接
    CHANGLOG.md 项目每个版本的更新 说明版本号,更新内容,修复了那写问题等(参考github.com)
    dillinger MarkDown

    标题一 ## 标题二 ### 标题三 。。。。。 ###### 标题六

    列表项 * / -
    引用句子 >
    插入链接 [百度](http://www.baidu.com)
    插入图片 !【百度】(地址)
    粗体文字 *** *** ** ** * *
    表格 | | | | | 居中对其 :----:
    代码 <script> 代码段

    展开全文
  • Web前端面试指导 四十四 什么是响应式开发

    首先给大家分享一个巨牛巨牛的人工智能教程,是我无意中发现的。教程不仅零基础,通俗易懂,而且非常风趣幽默,还时不时有内涵段子,像看小说一样,哈哈~我正在学习中,觉得太牛了,所以分享给大家!点这里可以跳转到教程

    首先给大家分享一个巨牛巨牛的人工智能教程,是我无意中发现的。教程不仅零基础,通俗易懂,而且非常风趣幽默,还时不时有内涵段子,像看小说一样,哈哈~我正在学习中,觉得太牛了,所以分享给大家!点这里可以跳转到教程

    首先给大家分享一个巨牛巨牛的人工智能教程,是我无意中发现的。教程不仅零基础,通俗易懂,而且非常风趣幽默,还时不时有内涵段子,像看小说一样,哈哈~我正在学习中,觉得太牛了,所以分享给大家!点这里可以跳转到教程

    首先给大家分享一个巨牛巨牛的人工智能教程,是我无意中发现的。教程不仅零基础,通俗易懂,而且非常风趣幽默,还时不时有内涵段子,像看小说一样,哈哈~我正在学习中,觉得太牛了,所以分享给大家!点这里可以跳转到教程

                   

    题目点评

    响应式开发是前端开发工作比较常见的工作内容,随着移动端的发展,网页设计必须考虑到移动端的设计,同一个网站为了兼容PC端和移动端显示,响应式开发是前端开发人员必备的技术,所以响应式开发的技术必须掌握。

    什么是响应式

    顾名思义,同一个网站兼容不同的大小的设备。如PC端、移动端(平板、横屏、竖排)的显示风格。



    需要用到的技术

    1. Media Query(媒体查询)

    用于查询设备是否符合某一特定条件,这些特定条件包括屏幕尺寸,是否可触摸,屏幕精度,横屏竖屏等信息。

    2. 使用em或rem做尺寸单位

    用于文字大小的响应和弹性布局。

    3. 禁止页面缩放

    <meta name="viewport" content="initial-scale=1, width=device-width, maximum-scale=1, user-scalable=no" />

    4. 屏幕尺寸响应

    a)  固定布局:页面居中,两边留白,他能适应大于某个值一定范围的宽度,但是如果太宽就会有很多留白,太窄会出现滚动条,在PC页面上很常见。

    b)  流动布局:屏幕尺寸在一定范围内变化时,不改变模块布局,只改变模块尺寸比例。比固定布局更具响应能力,两边不留白,但是也只能适应有限的宽度变化范围,否则模块会被挤(拉)得不成样子。

    c)  自定义布局:上面几种布局方式都无法跨域大尺寸变化,所以适当时候我们需要改变模块的位置排列或者隐藏一些次要元素。

    d)  栅格布局:这种布局方式使得模块之间非常容易对齐,易于模块位置的改变用于辅助自定义布局。

    响应式设计注意事项 

    1.宽度不固定,可以使用百分比

    #head{width:100%;}#content{width:50%;}

    2. 图片处理

       图片的宽度和高度设置等比缩放,可以设置图片的width为百分比,height:auto;

       背景图片可以使用background-size 指定背景图片的大小。

               

    浏览人工智能教程

    浏览人工智能教程

    浏览人工智能教程

    浏览人工智能教程

    展开全文
  • 1,什么是响应式网站 2,如何从零开始编写一个响应式网站(如何改装) 3,开发中有哪些主流的,前沿的技术 4,网站开发必备知识讲解 什么是响应式网站 简单来说: 同一个网站,在不同尺寸的设备上会显示不...

    学习的目标

    1,什么是响应式网站

    2,如何从零开始编写一个响应式网站(如何改装)

    3,开发中有哪些主流的,前沿的技术

    4,网站开发必备知识讲解

     

    什么是响应式网站

    简单来说:

    同一个网站,在不同尺寸的设备上会显示不一样的样式,包括布局,大小,显示内容等。

    优点和缺点:

    优点:

    减少工作量,

         只有一个网站即可。

         多出来的工作量只是js脚本,css样式。

    节省时间

    每个设备都能得到正确的设计

    缺点

         会加载更多的样式和脚本资源

         设计比较难精确定位和控制

         老版本浏览器兼容不好

     

    媒体查询

    媒体查询(css3增强了它,包含了更多的媒体类型和函数)

    eg  @media all and (min-width:800px) and (orientation:landscape) {}

    连接符:

         and ,(等同于or或) not only 

    主要的媒体属性(还可以加前缀,比如max-,min-)

         width,

         height,

         device-width(渲染表面的宽度,就是设备屏幕的宽度),

         device-height,

     

    视口(viewport)宽度和设备宽度

         width和device-width

         pc只有一种视口,就是浏览器的宽度

         mobile有三种

         布局视口(layout viewport) 在呈现到手机上之前,先按照960或更高造出来

         可视视口(visual viewport) 放大缩小就是在改变可视视口的宽高(和上面的关系仿佛用放大镜看书)

         理想视口(ideal viewport) 布局视口在一个设备上的最佳尺寸,宽度和可视视口相同

    如何开启理想视口

    /* <meta name="viewport" content="width=device-width"/> */

        意思是,meta类型为veiwport,布局视口的宽度设为设备屏幕的宽度(也就是可视视口),如果不写,那默认为布局视口的宽度

    /* <meta name="viewname" content="width=device-width,minimum-scale=1.0,maximum=1.0,user-scalable=no" /> 

         意思是,最小宽度为1,最大宽度为1,禁止用户缩放 */

     

    如何分析设计图

         和设计师聊好,哪里100%还原,哪里灵活处理

         搞清楚哪里不会随设备改变,哪里要改变,进而影响html结构

     

    响应式网站设计原则

         渐进增强,*优雅降级

         先设计小的还是大的,看项目的方向,看pc用户多还是mobile用户多

         先用google调试,再调试其他的,然后做些修修补补的工作,谷歌浏览器用户大,如果着急可以先上

         要考虑好断点的选择,断点就是说媒体查询用的最大最小宽度。比如480以下小屏幕,481-800中屏幕,801-1400大屏幕,再大巨屏幕。具体可以参考设计师和产品的意见。

     

    展开全文
  • 响应式开发经验,响应式页面的三种核心技术是什么 转载于:https://www.cnblogs.com/yingwo/p/4120384.html
  • 响应式开发经验,响应式页面的三种核心技术是什么 转载于:https://www.cnblogs.com/yingwo/p/4120389.html
  • 响应式开发是前端开发工作比较常见的工作内容,随着移动端的发展,网页设计必须考虑到移动端的设计,同一个网站为了兼容PC端和移动端显示,响应式开发是前端开发人员必备的技术,所以响应式开发的技术必须掌握。...
  • 3.1什么是响应式布局? 答:在一个项目的内容(模块、布局、内容)发生增删改时,项目可以自适应的发生一定变化而且不影响用户使用,且更换不用的设备可以同样访问此项目;这样的布局叫做响应式布局! 优点:一个...
  • 响应式开发原理

    千次阅读 2018-06-19 22:59:50
    什么是响应式网站?就是在不同终端设备上和任何尺寸的屏幕上也可以展示完美的设计响应式网站的概念:flexible grid layout 弹性网格布局flexible image 弹性图片media queries 媒体查询响应式网站的优点:减少...
  • 响应式设计很好的网站建设。为什么有的企业在选择网站建设的时候,不把所有有响应的网站都应用进去?虽然企业都知道响应式网站很好,但很多企业并不选择建设响应式网站,因为价格高于单独制作三个版本网站的成本。...
  • 响应式开发基础

    2018-10-22 10:08:21
    一、什么是响应式?   就是一个网站能够兼容多个终端。这为了更好地用户体验起见这么设计的。   二、那都有哪些步骤呢?   1、设置meta标签   最好首先要完成非响应式布局,这个取决于你个人喜好吧...
  • 响应式设计的基本原理是什么? 页面的设计和开发应当根据用户行为以及设备环境(系统平台、屏幕尺寸、屏幕定向等)进行相应的响应和调整。具体的实践方式由多方面组成,包括弹性网格和布局、图片、css media query的...
  • 什么是响应式网页?

    2019-12-08 13:56:28
    什么是响应式网页? 今天让我们一起来了解下什么是响应式网页呢? 小常说一下: 只做第一个我,不做第二个谁。 大家听说过响应式网页设计吗?何为响应式Web设计?如何去理解响应式网站呢? 响应式网站:就是网站上的网页...
  • 使用Telerik UI for ASP.NET Core进行跨平台开发 跨平台开发是.NET Core和.NET 5最具吸引力和纪念意义的功能之一,为了确保产品在不同的操作系统和IDE上的顺利开发,除了适用于Windows和Linux的标准.zip和.7zip,...
  • 现在都流行说做响应式开发,然而什么是响应式开发呢? 专业术语-响应式 简单来说,就是页面应该有能力去自动响应用户的设备环境。 响应式网页设计就是一个网站能够兼容多个终端——而不是为每个终端做一个...
  • 什么是响应式web设计 现在开发一个产品,基本上都会需要兼顾 PC端和 移动端。 一般有两种思路: 1.为每个终端做一个特定的版本,并给2级域名,根据终端环境调用不同的版本代码。 2.一个网站能够兼容多个终端 而响应...
  • 响应式开发原理 响应式开发 使用媒体查询 ​ @media css3属性 通过媒体查询 判断屏幕大小 决定使用什么布局 /* 媒体查询里面 一个独立的css语法环境 */ @media(判断条件){ // min-width max-width width 元素样式...
  • 响应式开发一招致胜

    2019-05-23 23:51:00
    第1章 前期准备 介绍了课程内容、背景和案例展示、什么是响应式网站、怎样分析设计图、响应式网站设计实践原则 1-1 课程安排 试看 1-2 课程简介 1-3 响应式网站设计的概念 试看 1-4 响应式网站的优点 试看 1-5 ...
  • 1. 什么是响应式开发”“响应式开发”也就是“响应式网站设计”一种网络页面设计布局,其理念,集中创建页面的图片排版大小,可以智能地根据用户行为以及使用的设备环境进行相对应的布局。换句话说,就是使用...
  • 什么是响应式布局? 响应式布局在2010年提出的说法,它可以兼容适应多个平台(pc、手机、pad等),其实这个概念在移动互联网大发展的背景下顺势提出的。响应式布局相比传统的固定的布局方式可以有更好的用户体验,...
  • 但前一个项目做完之后我发现bootstrap虽好,但里面的各种样式我利用的很少,最多用到它排版,当网站最后上传的时候你会发现,即使压缩之后,它也会占用相当大的一部分,所以这次我想自己用原生写,响应式开发(我...
  • 什么是响应式web设计

    2019-10-03 09:40:23
    什么是响应式web设计 现在开发一个产品,基本上都会需要兼顾 PC端和 移动端。 一般有两种思路: 1.为每个终端做一个特定的版本,并给2级域名,根据终端环境调用不同的版本代码。 2.一个网站能够兼容多个终端 ...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 1,586
精华内容 634
关键字:

响应式开发是什么