首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

JS:rem来响应开发

电脑版的商城昨晚做完了,今天赶着做手机端的,提到手机端的网站第一个想到的就是要 适应不同手机屏幕的宽度,保证在不同手机上都能正常显示给用户,我之前这类网站都是无脑引进bootstrap的。...但前一个项目做完之后我发现bootstrap虽好,但里面的各种样式我利用的很少,最多用到它排版,当网站最后上传的时候你会发现,即使压缩之后,它也会占用相当大的一部分,所以这次我想自己原生写,响应开发...2.媒体查询: 这个是css3中给出的,我们要解决的问题是适应手机屏幕,这个媒体查询正是为解决这个问题而生,媒体查询的功能就是为不同的媒体设置不同的css样 ,这里的“媒体”包括页面尺寸,设备屏幕尺寸等...(你还可以设置更多节点) 媒体查询的话要保证每个像素下都有对应的适配效果显然你要设置更小的宽度范围; 3.还有就是css3的单位rem: rem就是将根节点html的font-size的值作为整个页面的基准尺寸...那就要用到js在页面加载时获取window的宽度(浏览器窗口的宽度)$(window).width();在开发手机页面的时候,一般我们设置最大宽度为640px,因为640px可以保证在至今最宽的手机上显示时网页两端刚好贴合屏幕

6.1K10
您找到你想要的搜索结果了吗?
是的
没有找到

移动开发-响应

移动开发-响应布局 响应开发原理: 使用媒体查询针对不同宽度的设备进行布局和样式设置,从而适配不同设备 设备划分 尺寸区间 超小屏幕 (手机) < 768px 小屏设备 (平板) >= 768px...~ < 992px 中等屏幕 (桌面显示器) >= 992px ~ <1200px 宽屏设备 (大桌面显示器) >= 1200px 响应布局容器: 响应需要一个父级做为布局容器,来配合子级元素来实现变化效果...:停止维护,兼容性好,代码不够简洁,功能不够完善 3.4.1:稳定, 但放弃了IE6-IE7,对IE8支持但是界面效果不好,偏向用于开发响应布局、移动设备优先的Web项目 4.6.1 :最新版,目前还不是很流行..."> 布局容器: Bootstrap 需要为页面内容和栅格系统包裹一个 .container 容器,它提供了两个作此用处的类 container 类: 响应布局的容器 固定宽度 大屏...(viewport) 的容器 栅格系统介绍: 栅格系统英文为 Grid systems ,翻译为网格系统,是指将页面布局划分为等宽的列,然后通过列数的定义来模块化页面布局 Bootstrap提供了一套响应

2.4K20

Vue.js-深入响应原理

不管谁来,不管谁走,都是命运的安排~ 最近在看vue.js原理,希望和志同道合的你,一起探索 深入响应原理 — vue的响应系统,真是给前端同学带了极度舒适。...利用vue,在开发过程中我们只需要关注data就好了,渲染更新页面的功能,全部由vue内部帮我们做了,那么到底是怎么做到的呢?...由于在初始化实例的时候,已经对data的属性进行了getter/setter的转换,所以属性必须在data对象上存在才会将他转换为响应的。当我们在开发中确实需要这样时有两个方法可以选择。...this.someObject, { a: 1, b: 2 })` this.someObject = Object.assign({}, this.someObject, { a: 1, b: 2 }) 声明响应属性...vue不允许动态添加根级响应属性,所以需要在初始化时就进行声明。

1.5K30

探索 Vue.js 响应原理

接下来我根据个人理解,和大家一起探索下 Vue.js 中的响应原理,如有错误,欢迎指点~~ 一、Vue.js 响应的使用 现在有个很简单的需求,点击页面中 “leo” 文本后,文本内容修改为“你好,...和 React 开发业务时,只需关注页面数据如何变化,因为数据变化后,视图也会自动更新,这让我们从繁杂的 DOM 操作中解脱出来,提高开发效率。.../ 入口 JS 文件 / observer.js // 实现响应,将数据转换为响应对象 / watcher.js // 实现观察者和被观察者(依赖收集者) / vue.js...介绍 Vue.js 响应原理的核心知识点,然后带大家通过一个简单示例实现简单响应,最后通过改造这个简单响应的示例,实现一个简单 Vue.js 响应原理的示例。...相信看完本文的朋友,对 Vue.js响应原理的理解会更深刻,希望大家理清思路,再好好回味下~ 参考资料 官方文档 - 深入响应原理  《浅谈Vue响应原理》 《Vue的数据响应原理》

1.5K50

Spring 5 响应开发示例

前言 Spring 5 已经大力支持了响应开发模式,引入的响应框架叫做 Spring WebFlux。...关于 Spring 5 响应开发的介绍,可以看之前的文章“Spring 5 响应开发”。...本文不讲理论,直接创建一个响应的 Restful API 示例,基于 Spring Boot 2.0、MongoDB,目的在于快速了解响应代码是如何编写的。...小结 Spring 5 的 webflux 框架真的很牛,底层完全实现了响应模型,使我们项目的性能得到较大提升,并且在开发方式上尽可能的与原有方式保持一致。...通过上面这个小DEMO,我们可以对响应编码方式有一个大概的了解,可以看到,非常简单,但不要以为实际开发也很简单,Flux 有大量的方法需要我们去学习,而且 Spring 5 是基于 Java8 的,在开发中会大量用到

73410

响应web前端开发

为什么写这篇文章 结一老师之前有写过一篇从css角度去实现响应的文章(下手响应及断点设置分析),不过真正设计并实现一个全响应网页(RWD),还需要从一开始的布局设计开始,并从页面结构、页面表现和用户交互三个方面来实现一个全响应网页...---- 由于目前正在做的mini项目开发周期短,要求全平台可用,所以我采用了全响应的页面实现,针对PC浏览器、移动端浏览器做了全适配,尽量达到前端代码的重用,减少开发和维护成本。...在此向大家分享我对于设计和实现全响应页面的一些经验和心得。...另外,我们也可以jscss中的几乎所有事情,只不过这有悖于RWD的思想,而且对于性能的影响比较大。 注意:js代码一般只在两种时候执行:页面加载和事件回调。...最后贴一个之前我开发的一个全响应网站的地址(欢迎吐槽~):http://www.citygee.com/

1.1K10

响应web前端开发

为什么写这篇文章 结一老师之前有写过一篇从css角度去实现响应的文章(下手响应及断点设置分析),不过真正设计并实现一个全响应网页(RWD),还需要从一开始的布局设计开始,并从页面结构、页面表现和用户交互三个方面来实现一个全响应网页...由于目前正在做的mini项目开发周期短,要求全平台可用,所以我采用了全响应的页面实现,针对PC浏览器、移动端浏览器做了全适配,尽量达到前端代码的重用,减少开发和维护成本。...在此向大家分享我对于设计和实现全响应页面的一些经验和心得。...另外,我们也可以jscss中的几乎所有事情,只不过这有悖于RWD的思想,而且对于性能的影响比较大。 注意:js代码一般只在两种时候执行:页面加载和事件回调。...最后贴一个之前我开发的一个全响应网站的地址(欢迎吐槽~):http://www.citygee.com/

1.8K70

响应web前端开发

为什么写这篇文章 结一老师之前有写过一篇从css角度去实现响应的文章(下手响应及断点设置分析),不过真正设计并实现一个全响应网页(RWD),还需要从一开始的布局设计开始,并从页面结构、页面表现和用户交互三个方面来实现一个全响应网页...---- 由于目前正在做的mini项目开发周期短,要求全平台可用,所以我采用了全响应的页面实现,针对PC浏览器、移动端浏览器做了全适配,尽量达到前端代码的重用,减少开发和维护成本。...在此向大家分享我对于设计和实现全响应页面的一些经验和心得。...另外,我们也可以jscss中的几乎所有事情,只不过这有悖于RWD的思想,而且对于性能的影响比较大。 注意:js代码一般只在两种时候执行:页面加载和事件回调。...最后贴一个之前我开发的一个全响应网站的地址(欢迎吐槽~):http://www.citygee.com/

1K30

前端|响应开发之布局容器

问题描述 在前面学习了响应布局原理,简单的了解了一下响应布局许多功能及其原理,今天来学习一下响应布局中的布局容器。...解决方案 响应布局和之前的开发布局有着很多不同的地方,在做响应开发的时候会用的一个大的布局容器,在做响应布局开发的时候会用到一个框架——Bootstarp前端开发框架。...,就和在前面的响应布局原理中看到的图片是一样的。...还有一种布局是container-fluid类,这种布局的特点是: (1)流式布局容器百分百宽度 (2)占据全部视口(viewport)的容器 (3)适合于单独移动端开发 ? 图2.3 效果图 <!...结语 从上面的两种布局来看,在做响应开发的时候可以选择container类,如果单独移动端的开发可以选择container-fluid类。

69610

Meteor开发指南 — 响应GraphQL

Meteor正在着手开发一套响应的GraphQL实现,他们在前几天放出了一份high-level technical documentation。...应用的开发者不需要写任何显的代码来获取那条评论。 这就是响应GraphQL。你不必重新获取数据或是手动的重新加载网页。 基本上,它就是Meteor但是加上了GraphQL。...响应GraphQL开发体验 大多数的繁重工作已经被响应GraphQL库和工具完成了。所以,你只需要简单地在服务端编写GraphQL的数据模式,在客户端编写查询即可。...服务端app只是一个有着响应GraphQL数据库驱动的express-graphql。 所以你只需要按照普通Node.js的应用部署和扩展方式进行处理。 听起来不错!那么它在哪儿处理响应呢?...客户端响应GraphQL会和Lokka相似,但是有了响应的种种好处。 更多信息 这篇文章仅仅简要介绍了一下响应GraphQL。这个项目仍处于设计阶段。你可以查看下面这些文档获取更多信息。

966100

Vue.js关于响应部分的优化

这简直就是一个吊炸天的优化啊,因为要知道响应系统是 Vue.js 的核心实现之一,对它的优化就意味着对所有使用 Vue.js 开发的 App 的性能优化。...这次 basvanmeurs 提出的响应性能优化真的让尤大喜出望外,不仅仅是大大提升了 Vue 3 的运行时性能,还因为这么核心的代码能来自社区的贡献,这就意味着 Vue 3 受到越来越多的人关注;一些能力强的开发人员参与到核心代码的贡献...而 Vue.js 3.2 这次在响应性能方面的优化,是真的做到了质的飞跃,接下来我们就来上点硬菜,从源码层面分析具体做了哪些优化,以及这些优化背后带来的技术层面的思考。...响应实现原理 所谓响应,就是当我们修改数据后,可以自动某些事情;对应到组件的渲染,就是修改数据后,能自动触发组件的重新渲染。...副作用函数 那么,什么是副作用函数,在介绍它之前,我们先回顾一下响应的原始需求,即我们修改了数据就能自动某些事情,举个简单的例子: import { reactive } from 'vue'const

89620

揭秘 Vue.js 3.2 的响应优化!

这简直就是一个吊炸天的优化啊,因为要知道响应系统是 Vue.js 的核心实现之一,对它的优化就意味着对所有使用 Vue.js 开发的 App 的性能优化。...这次 basvanmeurs 提出的响应性能优化真的让尤大喜出望外,不仅仅是大大提升了 Vue 3 的运行时性能,还因为这么核心的代码能来自社区的贡献,这就意味着 Vue 3 受到越来越多的人关注;一些能力强的开发人员参与到核心代码的贡献...响应实现原理 所谓响应,就是当我们修改数据后,可以自动某些事情;对应到组件的渲染,就是修改数据后,能自动触发组件的重新渲染。...总结 一般在 Vue.js 的应用中,对响应数据的访问和修改都是非常频繁的操作,因此对这个过程的性能优化,将极大提升整个应用的性能。...大部分人去看 Vue.js 响应的实现,可能目标最多就是搞明白其中的实现原理,而很少去关注其中实现是否是最优的。

2.5K20

第11章 手机响应开发(下)

带着问题去看书学习啦~ HTML5+CSS3+JavaScript Web 前端开发案例教程(慕课版)【不推荐】,微信读书中找到的学习Web前端书籍,第11章开始啦,完结了!...耶(^-^)V 习题 11-1 简单描述什么是响应组件。 在响应网页设计中,将常用的页面功能(如图片集、列表、菜单和表格等)编码实现后共同封装在一起,从而便于日后的使用和维护。...11-2 实现响应图片的方法有哪些?...11-3 实现响应布局时,标签的作用是什么? 标签用于描述页面内容,关键词,作者,最新修订时间以及其它元信息。...https://man.ilovefishc.com/pageHTML5/meta.html 11-4 常见的实现响应表格的方法有哪几种?

68320
领券