pc端页面初始化样式

/* 基础样式定义 */
body,
html,
ul,
li,
p,
h1,
h2,
h3,
h4,
h5 {
  margin: 0;
  padding: 0;
}
h1,
h2,
h3,
h4,
h5,
h6 {
  font-weight: normal;
}
img {
  border: none;
  font-size: 0;
}
a {
  color: #71777d;
  text-decoration: none;
}
a:hover {
  text-decoration: none;
}
ul,
li {
  list-style-type: none;
}
body {
  margin: 0;
  padding: 0;
  border: 0;
  position: relative;
  min-width: 960px;
  color: #666;
  font-family: "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "微软雅黑", Arial, sans-serif;
  font-family: "YouYuan", "Microsoft YaHei";
}
/*icon定义*/
/* iconfont */
@font-face {
  font-family: 'iconfont';
  src: url('/static/common/plugins/iconfont/iconfont.eot');
  src: url('/static/common/plugins/iconfont/iconfont.eot?#iefix') format('embedded-opentype'), url('/static/common/plugins/iconfont/iconfont.woff') format('woff'), url('/static/common/plugins/iconfont/iconfont.ttf') format('truetype'), url('/static/common/plugins/iconfont/iconfont.svg#iconfont') format('svg');

  /* IE9*/
  /* iOS 4.1- */
}
.iconfont {
  font-family: "iconfont";
  display: inline-block;
}
@media screen and (max-width: 375px) {
  .iconfont {
    font-size: 24px;
    font-style: normal;
  }
}
@media screen and (min-width: 375px) {
  .iconfont {
    font-size: 26px;
    font-style: normal;
  }
}
.clearfix {
  *zoom: 1;
  /*overflow:hidden*/
}
.clearfix:after {
  content: "\200B";
  display: block;
  height: 0;
  clear: both;
  visibility: hidden;
}
h1,
h2,
h3,
h4,
h5 {
  text-align: center;
  font-weight: normal;
}
input {
  border: none;
  outline: none;
}
.fl {
  float: left;
}
.fr {
  float: right;
}
.text_c {
  text-align: center;
}
.text_l {
  text-align: left;
}
.wrap_960 {
  width: 960px;
  margin: 0 auto;
  text-align: center;
}
.wrap_960_ {
  width: 960px;
  margin: 0 auto;
}
.wrap_780 {
  width: 780px;
  margin: 0 auto;
  text-align: center;
}
.box_bor {
  box-sizing: border-box;
}
.none {
  display: none !important;
}
.input_num_n input[type=number] {
  -moz-appearance: textfield;
}
.input_num_n input[type=number]::-webkit-inner-spin-button,
.input_num_n input[type=number]::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
在Vue中实现PC端分辨率适配笔记本可以通过以下步骤完成: 1. 使用Vue CLI创建一个新的项目,并安装相关的依赖包。确保已经安装了vue-router和vuex等常用的插件。 2. 创建一个全局的样式文件,命名为global.css,并将其引入到主入口文件(main.js)中。在global.css中可以设置一些全局的样式,例如body的字体大小、页面的最小宽度等。 3. 在main.js中,监听浏览器窗口的resize事件,通过document.documentElement.clientWidth获取窗口的宽度,并将其存储到Vuex中。同时,在钩子函数中也要初始化一次,以适配刷新页面等情况。 4. 在需要适配的组件中,引入Vuex,并从Vuex中获取窗口宽度的数据。根据窗口的宽度,设置组件内部元素的样式,例如设置容器的宽度为窗口宽度的80%,居中显示等。可以使用计算属性来动态调整样式。 5. 使用@media媒体查询,在全局样式文件global.css中根据窗口的宽度设置一些响应式的样式。例如,当窗口宽度小于768px时,可以将某个容器的宽度设置为100%等。 6. 在开发过程中,可以使用Chrome浏览器的开发者工具进行调试,通过模拟不同的设备和分辨率,实时查看适配效果。 总之,通过监听窗口宽度的变化,动态设置组件样式和使用@media媒体查询,可以实现Vue PC端分辨率的适配。这种方法能够根据不同设备的分辨率来自适应地调整样式,提高应用的兼容性和用户体验。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值