响应式网站 布局 response

5 篇文章 0 订阅

一.  响应式布局:

响应式优缺点:

  • 优点: 节省时间,减少工作量,每个设备都得到正确的设计,搜索优化...
  • 缺点: 加载更多的样式和脚本资源,设计较难的的精确控制,老版本兼容性不好...

响应式网站设计实践原则:

  • 渐进增强
  • 优雅降级

主要知识点:

  • @media
  • 响应式单位 rem
  • picture 响应式图片

网站

二. @media

媒体查询

  • 查询符 not、and、or、only
  •  not: 有效范围到","
  •  and: 全部符合
  •  or: 符合其中一个,等同","
  •  only: 防止老旧的浏览器,不支持带媒体属性的查询

设置viewport视口

<meta view="viewport" content="width=device-width,initial-scale=1.0,
maximum-scale=1.0,minimum-scale=1.0,user-scalable=no" />

@media

@media only screen and (max-width:30em;) 1em = 1rem = 16px; @media级别不在html之下

常用断点:

  • 超大屏PC 1200/1170  pc/平板横屏 980  平板  768 平板竖屏/手机横屏 480 手机 320 手机 0

5. Css Resets

* 每个浏览器特定标签的解释都有差异
* reset.css: 重置浏览器的css默认样式,浏览器的品种不同样式不同,然后重置,让他们统一
* normalize.css: 保留有用的浏览器默认样式,而不是一概的将它们抹杀,normalize.css作用在范围更广的元素上面,修正了一些bug及主流浏览器在渲染上的不一致


三. 三个单位px,em,rem

 

  •  px

1px相当于1像素

  • em

  参照物为父元素的font-size;
  em具有继承的特点;
  没有参照物时,浏览器会默认设置: 1em = 16px;

  • rem

  参照物为 根元素html,固定不变
  没有设置font-size时,默认设置: 1rem = 16px;
  html{font-size: 62.5%;} 1rem = 62.5%^16px=10px;

四. picture响应式图片

 

<picture>
    <source srcset="img/ad001-l.png" media = "(min-width:50em)">
    <source srcset="img/ad001-m.png" media = "(min-width:30em)">
    <img src="img/ad001.png">
</picture>

五. 兼容性

@media 

不支持ie9及以下,要用respond.js

https://blog.csdn.net/jeft_hai/article/details/82317780;

picture

引入picturefill,(polyfill)

<script src="https://cdn.bootcss.com/picturefill/3.0.3/picturefill.js"></script>

六. 横屏 竖屏

<link rel="stylesheet" media="all and (orientation:portrait)" href="portrait.css">    // 竖放加载
<link rel="stylesheet" media="all and (orientation:landscape)"href="landscape.css">   // 横放加载

//竖屏时使用的样式
<style media="all and (orientation:portrait)" type="text/css">
	#landscape { display: none; }
</style>

//横屏时使用的样式
<style media="all and (orientation:landscape)" type="text/css">
	#portrait { display: none; }
</style>

七. dpr

var dpr, rem, scale;
var docEl = document.documentElement;
var fontEl = document.createElement('style');
var metaEl = document.querySelector('meta[name="viewport"]');

dpr = window.devicePixelRatio || 1;
rem = docEl.clientWidth * dpr / 10;
scale = 1 / dpr;


// 设置viewport,进行缩放,达到高清效果
metaEl.setAttribute('content', 'width=' + dpr * docEl.clientWidth + ',initial-scale=' + scale + ',maximum-scale=' + scale + ', minimum-scale=' + scale + ',user-scalable=no');

// 设置data-dpr属性,留作的css hack之用
docEl.setAttribute('data-dpr', dpr);

// 动态写入样式
docEl.firstElementChild.appendChild(fontEl);
fontEl.innerHTML = 'html{font-size:' + rem + 'px!important;}';

// 给js调用的,某一dpr下rem和px之间的转换函数
window.rem2px = function(v) {
    v = parseFloat(v);
    return v * rem;
};
window.px2rem = function(v) {
    v = parseFloat(v);
    return v / rem;
};

window.dpr = dpr;
window.rem = rem;

 

  • 2
    点赞
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
好的,以下是一个使用 HTML、CSS、JS 和 MySQL 实现的响应注册登录界面的示例代码。 HTML 代码: ```html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Responsive Login/Register Form</title> <link rel="stylesheet" href="style.css"> </head> <body> <div class="container"> <div class="form-container sign-up-container"> <form action="#" method="POST" id="register-form"> <h1>Create Account</h1> <input type="text" name="username" placeholder="Username"> <input type="email" name="email" placeholder="Email"> <input type="password" name="password" placeholder="Password"> <button type="submit">Sign Up</button> </form> </div> <div class="form-container sign-in-container"> <form action="#" method="POST" id="login-form"> <h1>Sign In</h1> <input type="text" name="username" placeholder="Username"> <input type="password" name="password" placeholder="Password"> <button type="submit">Sign In</button> </form> </div> <div class="overlay-container"> <div class="overlay"> <div class="overlay-panel overlay-left"> <h1>Welcome Back!</h1> <p>Please login with your personal info</p> <button class="ghost" id="signIn">Sign In</button> </div> <div class="overlay-panel overlay-right"> <h1>Hello, Friend!</h1> <p>Enter your personal details and start journey with us</p> <button class="ghost" id="signUp">Sign Up</button> </div> </div> </div> </div> <script src="app.js"></script> </body> </html> ``` CSS 代码: ```css * { box-sizing: border-box; } body { background: #f6f5f7; font-family: 'Open Sans', sans-serif; } .container { background: #fff; border-radius: 10px; box-shadow: 0 0 10px rgba(0, 0, 0, 0.3); display: grid; grid-template-columns: repeat(2, 1fr); position: relative; overflow: hidden; width: 100%; max-width: 1000px; margin: auto; } .form-container { position: relative; background: #fff; grid-column: 1 / 2; grid-row: 1 / 2; display: flex; flex-direction: column; justify-content: center; align-items: center; z-index: 2; } .sign-up-container { z-index: 1; } .sign-in-container { z-index: 2; } form { background: #fff; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 0 50px; height: 100%; text-align: center; } h1 { font-weight: bold; margin-top: 20px; margin-bottom: 20px; } input { background: #eee; border: none; padding: 12px 15px; margin: 8px 0; width: 100%; } button[type="submit"] { background: #4CAF50; color: #fff; border: none; padding: 12px 0; margin: 16px 0; width: 100%; cursor: pointer; } .ghost { background: transparent; border: 1px solid #4CAF50; color: #4CAF50; } .overlay-container { grid-column: 2 / 3; grid-row: 1 / 2; background: #4CAF50; display: flex; flex-direction: column; justify-content: center; align-items: center; } .overlay { background: rgba(0, 0, 0, 0.7); border-radius: 10px; box-shadow: 0 0 10px rgba(0, 0, 0, 0.3); color: #fff; display: grid; grid-template-columns: repeat(2, 1fr); position: absolute; height: 100%; width: 100%; transform: translateX(-100%); transition: transform 0.6s ease-in-out; } .overlay-panel { align-items: center; display: flex; flex-direction: column; justify-content: center; text-align: center; } .overlay-left { grid-column: 1 / 2; } .overlay-right { grid-column: 2 / 3; } .overlay-right:before { border-bottom-right-radius: 10px; content: ""; position: absolute; top: 0; right: 0; height: 100%; width: 50%; background: #4CAF50; transform: translateX(0); transition: transform 0.6s ease-in-out; } .overlay-left:before { border-top-left-radius: 10px; content: ""; position: absolute; top: 0; left: 0; height: 100%; width: 50%; background: #4CAF50; transform: translateX(0); transition: transform 0.6s ease-in-out; } .overlay-right:hover:before { transform: translateX(100%); } .overlay-left:hover:before { transform: translateX(-100%); } .social-icon { border-radius: 50%; color: #fff; display: flex; align-items: center; justify-content: center; height: 40px; margin: 0 10px; width: 40px; } .facebook { background: #3B5998; } .twitter { background: #55ACEE; } .google { background: #dd4b39; } .fab { font-size: 20px; } @media screen and (max-width: 960px) { .container { grid-template-columns: 1fr; } .overlay { grid-template-columns: 1fr; } .overlay-container { height: auto; } .overlay-left, .overlay-right { height: auto; width: 100%; } .overlay-left:before, .overlay-right:before { transform: translateY(0); width: 100%; height: 50%; border-radius: 10px; } .overlay-right:before { border-radius: 0 0 10px 10px; } .overlay-left:before { border-radius: 10px 10px 0 0; } } ``` JS 代码: ```js const signUpButton = document.getElementById('signUp'); const signInButton = document.getElementById('signIn'); const container = document.querySelector('.container'); signUpButton.addEventListener('click', () => { container.classList.add('sign-up-mode'); }); signInButton.addEventListener('click', () => { container.classList.remove('sign-up-mode'); }); const registerForm = document.getElementById('register-form'); const loginForm = document.getElementById('login-form'); registerForm.addEventListener('submit', (e) => { e.preventDefault(); const username = registerForm.elements.username.value; const email = registerForm.elements.email.value; const password = registerForm.elements.password.value; // Send registration request to server fetch('/register', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ username: username, email: email, password: password }) }) .then(response => response.json()) .then(data => { if (data.success) { alert('Registration successful'); } else { alert('Registration failed'); } }) .catch((error) => { console.error('Error:', error); }); }); loginForm.addEventListener('submit', (e) => { e.preventDefault(); const username = loginForm.elements.username.value; const password = loginForm.elements.password.value; // Send login request to server fetch('/login', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ username: username, password: password }) }) .then(response => response.json()) .then(data => { if (data.success) { alert('Login successful'); } else { alert('Login failed'); } }) .catch((error) => { console.error('Error:', error); }); }); ``` 上述代码实现了一个响应的注册登录界面,使用了 Grid 布局和 CSS 动画来实现界面的切换效果。使用 fetch 函数发送 AJAX 请求,后端使用 Node.js 和 Express 框架来处理请求和响应。注意,这只是一个示例,实际上需要更多的逻辑处理和后端支持才能实现完整的注册登录功能。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值