Question

我将这两个图标放在我页面右下角的固定位置。

它可以在更大的屏幕上完美运行，但随着屏幕大小调整，图标会移动。

HTML

<div class="general_social_icons">
    <nav class="social">
        <ul>
            <li class="w3_facebook"><a href="#">Facebook </a></li>
            <li class="w3_g_plus"><a href="#">Google+ </a></li>       
        </ul>
  </nav>
</div>

CSS：

.social {
  position: fixed;
  bottom: 0%;
  right:0%;
  width: 4%;
  z-index: 9999;
}

.social li a{
  font-size:.7em;
}

.social ul {
  padding: 0px;
}
.social ul li {
  display: block;
  margin: 5px;
  width: 310px;
  text-align: left;
  padding: 10px;
  -webkit-border-radius: 30px 0 30px 30px;
  -moz-border-radius: 30px 0 30px 30px;
  border-radius: 30px 0 30px 30px;
  -webkit-transition: all 1s;
  -moz-transition: all 1s;
  -ms-transition: all 1s;
  -o-transition: all 1s;
  transition: all 1s;
}

.w3_facebook{
  background:#3b5998;
}

.w3_g_plus{
  background:#dd4b39;
}

.social ul li:hover {
  -webkit-transform: translate(-110px, 0);
  -moz-transform: translate(-110px, 0);
  -ms-transform: translate(-110px, 0);
  -o-transform: translate(-110px, 0);
  transform: translate(-130px, 0);
}
.social ul li a{
  color:#212121;
}
.social ul li:hover a {
  color: #fff;
  text-decoration: none;
}

这是小提琴：https://jsfiddle.net/746d9nyc/2/

如何确保图标与任何屏幕尺寸保持在同一位置，就像全屏一样。

Answer 1

这种情况正在发生，因为.social容器的百分比宽度。

要解决它：

•指定固定宽度

.social {

  width:27px;

}

•设置minimum width

.social {

  min-width:27px;

}

Answer 2

问题是您将import {inject, noView, bindable} from 'aurelia-framework'; const googleSigninClientID = '927519533400-mfupo3lq9cjd67fmmvtth7lg7d8l50q9.apps.googleusercontent.com'; function preparePlatform() { // https://developers.google.com/identity/sign-in/web/build-button // The name of the global function the platform API will call when // it's ready. const platformCallbackName = 'setGooglePlatformReady'; // An "API ready" promise that will be resolved when the platform API // is ready. const ready = new Promise( resolve => window[platformCallbackName] = resolve); // Inject the client id meta tag const meta = document.createElement('meta'); meta.name = 'google-signin-client_id'; meta.content = googleSigninClientID; document.head.appendChild(meta); // Inject an async script element to load the google platform API. // Notice the callback name is passed as an argument on the query string. const script = document.createElement('script'); script.src = `https://apis.google.com/js/platform.js?onload=${platformCallbackName}`; script.async = true; script.defer = true; document.head.appendChild(script); return ready; } const platformReady = preparePlatform(); @noView() @inject(Element) export class GoogleSigninButton { @bindable success = googleUser => { }; @bindable error = error => { }; @bindable scope = 'profile email'; @bindable theme = 'dark'; @bindable width = 240; @bindable height = 50; constructor(element) { this.element = element; } attached() { platformReady.then(this.renderButton); } renderButton = () => { gapi.signin2.render(this.element, { scope: this.scope, width: this.width, height: this.height, longtitle: true, theme: this.theme, onsuccess: googleUser => { console.info(googleUser); this.success({ googleUser }); }, onfailure: error => { console.error(error); this.failure({ error }); } }); } } width设置为百分比。

.social

更新小提琴：https://jsfiddle.net/746d9nyc/3/

调整大小屏幕

2 个答案: