wordpress素材下载源码,郑州黑帽seo培训,佛山正规的免费网站优化,网页预览手机网站效果实现响应式布局是工作中必不可少 客户需要
若是使用vue element ui 的方式实现
浏览器宽度为760的情况 浏览器宽度为360的情况 手机上的显示的情况 一、对于屏幕尺寸的定义
element UI参照Bootstrap的解决方案提供了五种屏幕大小尺寸#xff1a;xs、sm、md、lg 和 xl。并对…实现响应式布局是工作中必不可少 客户需要
若是使用vue element ui 的方式实现
浏览器宽度为760的情况 浏览器宽度为360的情况 手机上的显示的情况 一、对于屏幕尺寸的定义
element UI参照Bootstrap的解决方案提供了五种屏幕大小尺寸xs、sm、md、lg 和 xl。并对这五种尺寸提供了两种解决方案。
名称尺寸设备xs 768px 超小屏 如手机sm ≥768px 小屏幕 如平板md ≥992px 中等屏幕 如桌面显示器lg≥1200px 大屏幕 如大桌面显示器xl ≥1920px 2k屏等
二、Element UI提供的两种解决方案
一在标签中指定元素所占大小 这种方式通常需要结合el-row/el-row标签使用。在列元素中指定不同尺寸下元素所占的大小例如:xs4表示在手机上将一行分为24栏本元素占4栏。这种方法简化了CSS关于响应式布局代码的编写但是需要配合el-row/el-row标签使用不是很灵活。
el-row :gutter10el-col :xs8 :sm6 :md4 :lg3 :xl1div classgrid-content bg-purple/div/el-colel-col :xs4 :sm6 :md8 :lg9 :xl11div classgrid-content bg-purple-light/div/el-colel-col :xs4 :sm6 :md8 :lg9 :xl11div classgrid-content bg-purple/div/el-colel-col :xs8 :sm6 :md4 :lg3 :xl1div classgrid-content bg-purple-light/div/el-col
/el-row:xs4表示在手机上将一行分为24栏本元素占4栏。这种方法简化了Css关于响应式布局代码的编写但是需要配合el-row/el-row标签使用不是很灵活。
二使用样式类指定元素是否显示
这种方法需要导入element-ui/lib/theme-chalk/display.css样式就可以实现在不同屏幕尺寸下元素是否显示。这种方法的好处是不需要配合el-row/el-row标签就可以使用使用起来比较灵活。但是这种只能简单的对元素进行隐藏如果需要实现稍微复杂点的响应式样式就要思考很多。使用这种方法首先需要导入样式import element-ui/lib/theme-chalk/display.css;。然后在目标元素上添加类名就行。例如
el-divider classhidden-sm-and-up/el-divider
这表示el-divider/el-divider元素在手机网页中显示在平板及比平板屏幕大的设备上隐藏。下面是Element UI官网提供的一些用于隐藏元素的类名。
hidden-xs-only - 当视口在 xs 尺寸时隐藏 hidden-sm-only - 当视口在 sm 尺寸时隐藏 hidden-sm-and-down - 当视口在 sm 及以下尺寸时隐藏 hidden-sm-and-up - 当视口在 sm 及以上尺寸时隐藏 hidden-md-only - 当视口在 md 尺寸时隐藏 hidden-md-and-down - 当视口在 md 及以下尺寸时隐藏 hidden-md-and-up - 当视口在 md 及以上尺寸时隐藏 hidden-lg-only - 当视口在 lg 尺寸时隐藏 hidden-lg-and-down - 当视口在 lg 及以下尺寸时隐藏 hidden-lg-and-up - 当视口在 lg 及以上尺寸时隐藏 hidden-xl-only - 当视口在 xl 尺寸时隐藏
三、不该被忘记的CSS语法
比如时间选择器不能满足需求时我们可以使用media语法来确定屏幕尺寸并且指定在不同尺寸下的元素样式。例如我们指定一个元素在不同屏幕尺寸下的大小
浏览器宽度800的情况 手机尺寸的情况 media screen and (max-width: 768px) {.customCon .el-picker-panel__body {display: flex;flex-direction: column;justify-content: center;align-items: center;}.customCon .el-date-range-picker__content {width: 100%;}
}
效果图
pc 手机设备 示例代码如下无添加额外class
templatedivel-row :gutter25el-form refelForm :modelformData :rulesrules sizemediumel-col :span20 :xs24el-form-item label线索内容 propclueContentel-inputv-modelformData.clueContenttypetextareaplaceholder请输入线索内容:autosize{ minRows: 4, maxRows: 4 }:style{ width: 100% }//el-form-item/el-colel-col :span20 :xs24el-button typeprimary style clickfindClue检索/el-button/el-colel-col :span24el-form-item label涉及企业 propclueCompanyel-inputv-modelformData.clueCompanyplaceholder请输入涉及企业clearable//el-form-item/el-colel-col :span20el-form-item label所属镇街 propregionNameel-selectv-modelformData.regionNameplaceholder请选择clearablefilterableel-optionv-for(item, index) in regionNameOptions:keyindex:labelitem.label:valueitem.label//el-select/el-form-item/el-colel-col :span20el-form-item label线索地址 propclueAddressel-inputv-modelformData.clueAddressplaceholder请输入线索地址clearable//el-form-item/el-colel-col :span20el-form-item label线索类型 propclueTypeel-radio-group v-modelformData.clueType sizemediumel-radiov-for(item, index) in clueTypeOptions:keyindex:labelitem.value:disableditem.disabled{{ item.label }}/el-radio/el-radio-group/el-form-item/el-colel-col :span20el-form-item label污染源类型 proppollutionTypeel-radio-group v-modelformData.pollutionType sizemediumel-radiov-for(item, index) in pollutionTypeOptions:keyindex:labelitem.dictValue{{ item.dictLabel }}/el-radio/el-radio-group/el-form-item/el-colel-col :span20el-form-item label违法行为项 propwfxwxel-selectv-modelformData.wfxwxvalue-keyidplaceholder请选择clearablefilterablechangebreakChangeel-optionv-foritem in wfxwxArr:keyitem.id:labelitem.wfxwx:valueitem//el-select/el-form-item/el-colel-col :span20el-form-item label法律法规名称 propflfgNameel-inputv-modelformData.flfgNameplaceholder请查看法律法规名称clearable//el-form-item/el-colel-col :span20el-form-item label法律法规内容 propflfgContentel-inputv-modelformData.flfgContentplaceholder请查看法律法规内容clearableautosizetypetextarea//el-form-item/el-colel-col :span20el-form-item label线索时间 propclueTimeel-date-pickerv-modelformData.clueTimeformatyyyy-MM-ddvalue-formatyyyy-MM-dd:style{ width: 100% }placeholder请选择线索时间clearable//el-form-item/el-colel-col :span20el-form-item label线索交办科室 propdesignateDeptel-cascaderv-modelformData.designateDept:optionsdesignateDeptOptions:propsdesignateDeptProps:style{ width: 100% }placeholder请选择线索交办科室clearablechangehandleChange//el-form-item/el-colel-col :span20el-form-item label是否为线索 propisClueFirstStepel-radio-group v-modelformData.isClueFirstStep sizemediumel-radiov-for(item, index) in isClueFirstStepOptions:keyindex:labelitem.value:disableditem.disabled{{ item.label }}/el-radio/el-radio-group/el-form-item/el-colel-col :span20el-form-item label理由 propisClueFirstStepResonel-inputv-modelformData.isClueFirstStepResontypetextareaplaceholder请输入理由:autosize{ minRows: 4, maxRows: 4 }:style{ width: 100% }//el-form-item/el-colel-col v-ifthis.deployId :span24el-form-item sizelargeel-button typeprimary clicksubmitForm提交/el-buttonel-button clickresetForm重置/el-button/el-form-item/el-col/el-form/el-row/div
/template
