简单的响应式网页问题总结

携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第1天，点击查看活动详情

1. 关于笔记本电脑屏幕分辨率是1920px * 1080px， 显示设置通常会默认设置放大125%，也就是DPI为125%，打开网页会被浏览器放大，并且该网页首页是整屏滚动的页面，出现了页面中的内容展示不全的问题。

a. 使用zoom缩放页面为80%，可以实现页面合适的展示效果，但是高度会变为80%，底部会存在空白，所以没有使用该方法。

b. 使用媒体查询控制屏幕放大为1.25倍时，调整相关css，实现简单的适配

@media only screen and (-webkit-min-device-pixel-ratio: 1.25) {
    ...
}

2. 关于百度地图的简单使用

1. 申请百度密钥（ak）
2. 引入相关资源

<script type="text/javascript"
    src="//api.map.baidu.com/api?type=webgl&v=1.0&ak=密钥"></script>
// 个性化地图的资源
<script src="//bj.bcebos.com/v1/mapopen/api-demos/js/mapStyle.js"></script>    

3. 创建地图实例，并设置相关参数

//个性化地图相关设置
var map = new BMapGL.Map('allmap');  // 创建Map实例
map.centerAndZoom(new BMapGL.Point(104.074423, 30.621795), 16);// 初始化地图,设置中心点坐标和地图级别
map.enableScrollWheelZoom(true);//开启鼠标滚轮缩放

map.setMapStyleV2({ styleJson: styleJson2 });
// 设置地图显示元素\隐藏室内图
map.setDisplayOptions({
  indoor: false,
  poi: true       //是否显示POI信息 
});

var opts = {
  position: new BMapGL.Point(104.074423, 30.621795), // 指定文本标注所在的地理位置
  offset: new BMapGL.Size(-190, -150) // 设置文本偏移量
};

//自定义控件
let mark = `<a href=""
    target="_blank" rel="noopener noreferrer">
    <div class="top-logo">
      <img src="assets/img/map-logo.png" alt="">
    </div>
    <div class="company-row aligncenter">
      <img src="assets/img/map-icon1.png" alt="">
      <span>公司名称</span>
    </div>
    <div class="add-row aligncenter">
      <img src="assets/img/map-icon2.png" alt="">
      <span>地址</span>
    </div>
  </a>`
// 创建文本标注对象
var label = new BMapGL.Label(mark, opts);
// 自定义文本标注样式
label.setStyle({
  fontSize: '14px',
});
map.addOverlay(label);
 

3. 全屏滚动，在首屏实现点击一个向下的图标，可以实现滚动到下一屏

全屏滚动是使用swiper实现的，因此需要把swiper默认向下的指示箭头替换成这个向下的图标，并给该图标添加上下移动的动画

.next-icon img {
  -webkit-animation: bounce-down 1s linear infinite;
  animation: bounce-down 1s linear infinite;
}

@keyframes bounce-down {
  25% {
    transform: translateY(-3px);
  }

  50%,
  100% {
    transform: translateY(0);
  }

  75% {
    transform: translateY(3px);
  }
}

4. 思源黑体字体的使用

在网上下载的字体文件，在css中导入并使用

@font-face {
  font-family: 'webfont';
  font-display: swap;
  src: url('../font/webfont.eot'); /* IE9 */
  src: url('../font/webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
  url('../font/webfont.woff2') format('woff2'),
  url('../font/webfont.woff') format('woff'), /* chrome、firefox */
  url('../font/webfont.ttf') format('truetype'), /* chrome、firefox、opera、Safari, Android, iOS 4.2+*/
  url('../font/webfont.svg#webfont') format('svg'); /* iOS 4.1- */
}

body {
  font-family: "webfont","Noto Sans SC","Microsoft YaHei", Arial;
}

5. 关于使用translate（-50%，-50%）会导致字体图片模糊

元素作用了 transform: translate() 后的计算值产生了非整数，导致元素的边缘没有和像素点对齐，出现模糊的情况

a. translate里的参数用固定值 因为需要使用transform做移入动画，最后实现居中，并且页面是响应式的，不用百分比，太难调了

b. 把字体图片宽高弄成偶数

其实我都看不出来模糊，不过公司设计觉得模糊，就得调整下（doge）

6. 文字两端对齐

.info{
    text-align: justify;
}

文字右侧没有对齐，客户觉得不好看，初始效果：

调整之后的效果：