vue开发页面大小不匹配问题

内容同样的宽度,为什么在HTML文件里面浏览起可视宽度1300左右,vue文件里面浏览器可视的有1700左右,导致我的内容旁边空白部分变多了,而且后者视觉上看起来就像是被缩小了一样,但是检查内容的宽度数据上是没错的,有没有大佬知道原因,求告知,谢谢!

0

1个回答

可以啊,最近一直想学习上前端。

0
Csdn user default icon
上传中...
上传图片
插入图片
抄袭、复制答案,以达到刷声望分或其他目的的行为,在CSDN问答是严格禁止的,一经发现立刻封号。是时候展现真正的技术了!
其他相关推荐
Vue开发页面时自动匹配页面大小宽度的方法
方法写在 watch 当中,因为要监听 initData 中的数据变化  watch: { initData () { let H = document.querySelector('.boxShadow') H.style.height = '' setTimeout(() => { console.log...
vue组件页面高度根据屏幕大小自适应
网页可见区域宽:document.body.clientWidth 网页可见区域高:document.body.clientHeight 网页可见区域宽:document.body.offsetWidth (包括边线的宽) 网页可见区域高:document.body.offsetHeight (包括边线的宽) 我们将document.body.clientWidth赋值给data中自定义的变量: ...
vue页面初始化大小rem,自适应效果设置
window.onload = function(){ getRem(750,100)};window.onresize = function(){ getRem(750,100)};function getRem(pwidth,prem){ var html = document.getElementsByTagName("html")[0]; var oWidth = ...
vue开发:顶端粘滞效果的页面
通常一个长的页面,需要滚动浏览,有部分重要信息会随着滚动而看不见,因此需要粘滞在顶端,而又不影响滚动浏览,这个demo基于vue2,实现这个需求。
基于vue的移动web app页面缓存解决方案
想自己动手搭建一个 Docker 环境?体验时下最火的虚拟容器技术,试试腾讯云上实验室吧 https://cloud.tencent.com/developer/labs 原文链接:https://segmentfault.com/a/1190000010428654 解决移动web app经常遇到的两个问题:识别前进后退、后退恢复页面 —— 由zack24q分享 现
Vue-cli开发多页面应用
vue-cli开发多页面应用
vue移动端5页面根据屏幕适配的四种方案
原文http://www.cnblogs.com/web1/p/9812669.html 最近做了两个关于h5页面对接公众号的项目,不得不提打开微信浏览器内置地图导航的功能确实有点恶心。下次想起来了的话,进行总结分享一下如何处理。在vue移动端h5页面当中,其中适配是经常会遇到的问题,这块主要有两个方法可以适用。 方法一:引入淘宝开源的可伸缩布局方案 引入淘宝开源的可伸缩布局方案: http...
vue开发单页面应用
今天我们看看VUE怎么开发单页面应用,VUE提供了脚手架vue-cli,通过这个可以很轻松的创建VUE单页面应用, 1.创建VUE项目    首先确保电脑上安装了NODE.JS,  在创建项目的目录下,打开CMD命令行,执行脚手架命令,安装脚手架cli.   # 全局安装 vue-cli, 一定要在全局模式下安装vue-cli,否则无法使用vue命令 npm install -g vue...
Vue开发拓展工具
Vue.js devtools_3.1.2_0是开发者在开发Vue组件时的浏览器页面调试工具,可以F12查看页面vue组件中的各种参数,方便开发
VUE 单页面使用 echart 窗口变化时的使用
在 VUE 项目中,为了使 echart  在窗口变化时能够自适应,要用到   window.resize = function(){ .......};  但是我在项目刚开始的时间就有一个地方的高度变化使用了 window.resize  ,在里面再次使用 会覆盖掉原来的,所以在里面图表使用时可以用 window.addEventListener('resize',this.resizeFu
vue开发中在页面代码中一律不能使用this
<div @click='this.limitNum=this.address.length'></div>以上代码是错误的,因为当前代码的作用域就已经是this了 正确写法<div @click='limitNum=address.length'></div>
VUE-自动缩放网页大小的代码
  概述 自动缩放网页大小的代码   实现参考 取屏幕大小 screen.width screen.height 根据屏幕大小缩放 if (window.screen.width=='600') document.write ('&amp;lt;body style=&quot;zoom: 55%&quot;&amp;gt;'); else if (window.screen.width=='800') documen...
VUE开发微信H5页面总结
  一、微信网页授权 网页授权流程分为四步,这里只说前端需要做的,其中的第一步:跳转授权页面获取code。 这里分享下我的授权逻辑(下图),它有两个优点: 授权跳转在dom渲染之前,体验会好一些; 本地存储了openId,前后端均不用频繁的与微信服务器交互。       二、微信jssdk授权 如果你页面中有用到分享、上传图片、微信支付等功能,那么需要先进行js-sdk授权。我...
大小比较的类型不匹配问题
char c[10000]; ...........//省略n行代码 if ( c[0] == 0xaa ) ............ 编译器说comparison is always false due to limited range of data type 于是把if括号里表达式写成(int)c[0] == 0xaa,就是先强制转换再比较,但是编译器还是提示上面的东
VUE减小vendor.js大小
1、懒加载 2、gzip压缩 3、组件复用 帮助链接:https://segmentfault.com/q/1010000008832754/a-1020000008832924/revision
vue解决ios环境下点击输入框页面被顶起不能自动回弹到底部问题
开发中遇到的这个问题,索性习惯的百度(哈哈),做微信h5页面的相信都有遇到过的,我这里记录一下。 听说是微信6.7.4以上,ios12+系统都会有键盘不回弹 下面是一位道友的分享,我转发一下:https://blog.csdn.net/YY110621/article/details/87919966 问题效果图: 下面灰色部分就是调起系统键盘的时候没有回弹(很丑吧) 解决方法: 1....
使用vue开发移动端页面问题集合
其实vue和这些问题没有什么冲突,移动端的问题主要体现跨域、苹果手机的兼容和微信浏览器上。技术栈vue2.0 + vuex + vue-router + webpack + axios + scss + ES6/7cookies跨域不能携带cookies在跨域的时候,每次刷新,cookies的值都会发生变化。这个时候是已经设置了 Access-Control-Allow-Origin:* ,然后再...
监听页面元素宽高发生改变 resize
监听浏览器窗口发生改变时: $(window).resize(function() {  你要执行的函数 }); 监听页面元素宽高发生改变时: (function($, h, c) {       var a = $([]), e = $.resize = $.extend($.resize, {}), i, k = "setTimeout", j = "resize"
vue传统方式开发 (非npm) 集成element ui
1.为啥会用传统方式开发 由于以前老的项目都是采用传统方式开发 但是又想用vue这个开发方式 将之前的代码改为npm的方式不现实 只能两者结合使用cdn方式引入vue开发。 2.如何使用vue进行传统方式开发 2.1引入vue.js &amp;lt;html&amp;gt; &amp;lt;head&amp;gt; &amp;lt;/head&amp;gt; &amp;lt;body&amp;gt; &amp;lt;div id=&quot;app&quot; &amp;g...
webView加载H5 vue开发页面出现空白页的解决办法
vue尤其运用原生写的在webView加载出现空白页的解决办法在网上查找了好多方法都不行     可以利用https://babeljs.io/编译兼容模式的js 就显示正常了     还有一种使用https://www.bootcdn.cn/babel-polyfill/引入但是对于原生vue觉得不好用没处理过来...
vue中移动端自适应方案
方案1: 直接引入js  (自己 写的动态改变fontsize的js) function htRem() { var ww = document.documentElement.clientWidth; if (ww > 750) { ww = 750; } document.documentElement.style.fontSiz
vue多页面开发
在使用vue-cli构建项目时,默认模板都是用它的单页面应用,但有的时候需要我们做成多页面方式,要怎么操作和修改呢?先附上github上修改好的源代码链接:https://github.com/path2017/vue-multi-page。 大家都知道vue-cli结合webpack是最常用的模板,所以在想怎么解决vue的多页面应用时,可以通过修改webpack的配置入手。话不多说,先附一张项...
Vue开发 机顶盒版本页面问题小结
1.机顶盒报错,const ,由于编译问题,编译好的文件中含有const和let 关键字,通过babel-loader 进行编译,如果发现编译有问题,,还是存在const关键字,而且检查发现自己配置没有问题,把node_modules删除重新安装   2.由于页面布局采取非定宽瀑布流,更具图片数据,一张图片紧挨一张图片,从左向右从上到下无缝拼图实现页面布局,所有图片的每个的位置是更具图片的实...
做题目页面H5页面(Vue开发)
做题目页面H5页面(Vue开发) 最近公司需要,要写一个可以做题目的H5小页面,需求是挺简单的(目前来说),就是可以上一题下一题的,另外不存在什么输入,全是选择题;我仔细想想觉得也不复杂,就打算用前些时候学的Vue的公司来写(之前万年的Jquery的...),这个简单的小功能,我周末写了一天多,,,汗颜,还是太菜了..现在总结一下吧 1:题目展示和选项展示 首先这个功能不复杂,页面没有什么逻...
vue项目如何监听窗口变化,达到页面自适应?
【自适应】向来是前端工程师需要解决的一大问题——即便作为当今非常火热的vue框架,也无法摆脱——虽然elementui、iview等开源UI组件库层出不穷,但官方库毕竟不可能满足全部需求,因此我们可以通过【监听窗口变化】达到想要的绝大部分自适应效果。 获取窗口宽度:document.body.clientWidth 监听窗口变化:window.onresize 同时回顾一下JS里这些方法...
vue权限管理
vue权限管理,vue实战,vue学习,vue页面权限控制,vue项目实战
24k纯小白用Vue写移动端页面时遇到的适配坑
          作为一枚妥妥的小白,在没有丝毫觉悟的情况下,用刚入坑的Vue徒手写移动端,也没有任何要兼容不同手机屏幕的适配意识,惭愧....废话不说,下面讲讲这段时间遭遇到的适配问题~     完全无适配意识         在没有适配意识的情况下, 这真的是很伤啊,秉着曾经学习时的方式,编写网页页面,不会想到要在浏览器上切换其他的手机屏幕去调试,结果就会变成自信满满写好一个当前页面,...
Vue实现调节窗口大小时触发事件动态调节更新组件尺寸
需求: 1. 页面部分元素的尺寸需要根据实际打开时浏览器尺寸进行设置; 2. 页面打开后,调节浏览器窗口大小时需要动态调节部分元素的尺寸; 需要注意的点: window.onresize只能在项目中一处进行引用触发,如果在多个地方进行引用触发,会导致只有1个触发事件生效。 解决“多个组件都需要触发”的方案只能是通过一个地方触发后通过组件间通信进行触发。 (以调节class为myD
vue2.0之多页面的开发
-----------------------------------------------------------------------------------------------------------------写在最前面:这段分割线的内容是2018年4月3日写的,我2017年6月写了这篇文章,在这快一年的时间里,有人按照我的方法成功的实现多页面的开发,有人因为对webpack的配置...
Android SDK与ADT不匹配问题
Android SDK与ADT不匹配问题
开发单页面应用vue.js学习(一)
最近在学习SPA单页面应用开发,不知道用vue.js还是angularjs好,现学习下vuejs做下总结,以便日后好观看,也方便小白们一起学习。 单页面应用SPA 单页面应用都是用组件components组合在一起的,只有index.html首页一个页面, 其他所有的页面的显示都是相当于ajax局部刷新,页面不会跳转, 单页面应用(Single Page Application - S...
Vue 框架 学习--3、vue cli开发中组件套用的布局问题
前言:本文是为了总结个人在vue学习中摸索组件布局的规律而创作。 我们队组件进行布局需要了解该问题:          我们在操纵组件进行一些列效果实现时,组件的模板是否受到父元素的干扰? 我们来进行实验,看看实验结果: 首先我们在index.html中创建一个div作为导航栏: &amp;lt;!DOCTYPE html&amp;gt; &amp;lt;html&amp;gt; &amp;lt;head&amp;gt; ...
vue-cli项目监听窗口大小变化
网上这类文章已经很多很多,但是如果你去看,几乎全都是一样的,而且如果真的好用的话,那我也不会写这篇文章了。 这是百度第一个答案,也是大多数人都是这样的代码:http://www.cnblogs.com/datiangou/p/10136527.html 上述代码虽然貌似很麻烦,但如果能正常运行也能勉强接受。 但恼人的是第二次使用的时候就会出错了,是那种控制台不报错,啥都没改就自己错了找一下午找不...
vue构建手机端项目的过程
在使用vue构建手机端项目便捷开发过程中,需要在项目中配置常用的插件,常用的依赖。具体构建步骤如下:构建vue项目1. 创建vue项目 Vue init webpack 文件名 2. 安装项目依赖 npm install 3. 启动项目 npm run devVue项目默认不会自动打开浏览器,需要在config文件夹下index.js中将 autoOpenBrowser: false, 修改为 a...
Vue resize监听窗口变化
一、在Vue单个页面运用 &amp;amp;lt;template&amp;amp;gt; &amp;amp;lt;div id=&amp;quot;divId&amp;quot;&amp;amp;gt; &amp;amp;lt;/div&amp;amp;gt; &amp;amp;lt;/template&amp;amp;gt; &amp;amp;lt;script&amp;amp;gt; export default { data() {
在vue项目中页面加载的时候不显示{{}}
vue页面在加载的时候闪烁花括号{}},v-cloak指令和css规则如[v-cloak]{display:none}一起用时,这个指令可以隐藏未编译的Mustache标签直到实例准备完毕。 例如: /*css样式*/ [v-cloak] { display: none; } &amp;lt;!--html代码--&amp;gt; &amp;lt;div id=&quot;app&quot; v-cloak...
vs开发vue,无法热更新
Visual Studio Code开发vue,用npm run dev跑本地服务,修改代码之后在浏览器刷新没反应,需要重新跑一遍代码才会更新,这是怎么回事呢? 我遇到的情况是没有自动保存,自己手动保存代码会发现浏览器自动更新了。只需要讲vs改为自动保存即可,如下图: ...
vue第一个页面
&amp;lt;!DOCTYPE html&amp;gt; &amp;lt;html lang=&quot;en&quot;&amp;gt; &amp;lt;head&amp;gt; &amp;lt;meta charset=&quot;UTF-8&quot;&amp;gt; &amp;lt;title&amp;gt;基本代码&amp;lt;/title&amp;gt; &amp;lt;script src=&quot;vue.js&quot;&amp;gt;&amp;lt;/sc
web之vue+vue-router+jquery 以传统模式开发单页面应用
前段时间要做一个混合开发 h5+Android,以及微信公众号开发,商城模块+订单模块由h5开发,想着若以vue-cli开发的话实在不方便,不需要那么多的依赖,每次有不同的页面入口,又要重新更换默认路由和打包,很是麻烦,所以本人就想这时用传统页面或许更简单一些,不要抛弃传统~。开发技术jquery + vue + vue-router + axios 开发流程1.新建一个good.html 页面g...
根据屏幕大小显示不同的layout下的界面
1,采用不同的布局文件 res文件下 选中layout  Ctrl+C  选中res Ctrl +V  创建layout-land横屏显示的layout 同理创建layout-port竖屏显示的layout 图片横屏竖屏 选中drawable-xhdpi Ctrl+C 选中res Ctrl + V 创建drawable-land-xhdpi 其他分辨率的也一样
文章热词 设计制作学习 机器学习教程 Objective-C培训 交互设计视频教程 颜色模型
相关热词 mysql关联查询两次本表 native底部 react extjs glyph 图标 微信公众号vue开发视频 vue开发微信公众号教程