所谓自适应网页,通过屏幕的宽度实现加载对应的CSS样式表,提高移动终端的访问体验。
自适应网页主要用于解决,PC网页在移动端显示出现字体过小、模块错位、浮动遮挡等不良体验。
实际上网页无论是否进行了自适应,通过手机/平板等移动终端都是可以访问的。
但是对网页做移动端自适应适配,在如今是非常有必要的。
自适应网页开发简单归纳为以下三大要素:
实际上自适应开发是一件非常简单的事情。
其麻烦并不在于技术,而是对整个网页的CSS样式进行重新编写,这是一个比较浩大的工作。
那么如何进行自适应开发呢?
首先网页的head区域要标注一个这样的viewport元标签。
<!DOCTYPE html>
<html lang="zh_CN">
<head>
<!-- 网页的宽度自动适应手机屏幕的宽度 -->
<!-- width=device-width :表示宽度是设备屏幕的宽度 -->
<!-- initial-scale=1.0:表示初始的缩放比例,1.0就是占网页的100% -->
<!-- minimum-scale=1.0:表示最小的缩放比例 -->
<!-- maximum-scale=1.0:表示最大的缩放比例 -->
<!-- user-scalable=no:表示用户不可以调整缩放比例 -->
<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no">
</head>
</html>
在原来的CSS文件中增加覆写,举例说明。
案例已经完全包括了自适应开发中应用到的所有方法,比较简单。
/*原始的网页样式*/
.container {
width: 1200px;
margin-right: auto;
margin-left: auto;
padding-left: 15px;
padding-right: 15px
}
/*当屏幕宽度小于等于991px时,一般多为手机*/
/*className为container的元素宽度为100%*/
@media (max-width: 991px) {
.container {
width: 100%
}
}
/*当屏幕宽度大于等于992px且小于等于1099px时,一般多为平板*/
/*className为container的元素宽度为90%*/
@media (min-width: 992px) and (max-width: 1099px) {
.container {
width: 90%
}
}
/*当屏幕宽度大于等于1100px时,常规电脑*/
/*className为container的元素宽度为1100px*/
/*此处用于举例,实际这个样式是多余了,默认就是>1100px*/
@media (min-width: 1100px) {
.container {
width: 1100px
}
}
我们将根据CSS样式渲染生效原则,在这里简单提一下
浏览器缺省 < 外部样式表 < 外部样式表类选择器 < 外部样式表类派生选择器 < 外部样式表ID选择器 < 外部样式表ID派生选择器 < 内部样式表 < 内部样式表类选择器 < 内部样式表类派生选择器 < 内部样式表ID选择器 < 内部样式表ID派生选择器 < 内联样式
关于这么多种样式生效类型,就不一一介绍了,这属于CSS的基础。
定义一个全新的文件,与原来的CSS样式文件互不干扰。
值得注意的是,自适应的样式表一定要放在原始样式表的下面。
CSS样式渲染生效还有一个基本原则就是,后者覆写前者(或者又称为距离元素最近的样式生效) 。
这种方式与传统方式的差异在于不需要指定大量的@media标签在CSS文件中,与源CSS样式表分开,易读性高。
在开发的时候就和正常编写CSS样式一致,更为高效。
<!DOCTYPE html>
<html lang="zh_CN">
<head>
<!-- 原始的样式表 -->
<link rel="stylesheet" href="/static/css/index.css">
<!-- 当屏幕宽度低于768px时会加载这个CSS文件 -->
<link rel="stylesheet" href="/static/css/mobile.css" media="screen and (max-width:768px)">
</head>
</html>
实际开发中更加推荐使用第二种开发模式:
当前还没有观点发布,欢迎您留下足迹!
在前端页面中文字超出隐藏并添加省略号是比较常见的样式处理,实际CSS样式中单行省略和多行省略的样式有所差异,在某些特殊场景下多行超出的样式会不生效,本文给出相关解决方案
使用背景色渐变可以使得页面质感得到大幅度提升,CSS样式中通过gradients属性指定两个或多个颜色之间平滑过渡,由于颜色的渐变是由浏览器生成,因此不会出现不同分辨率下失真的情况。
对于很多二栏布局的网站而言,正文部分过长时,侧边栏区域下拉过程中出现大片空白,因此我们可以实现当屏幕下滑达到指定元素位置(如即将越过)后对元素固顶来解决侧边栏区域的空旷感
严谨的页面开发需要着重关注前台校验相关的内容,确保请求参数的合法以保证服务器安全,界面参数众多需要建立一个公共方法,公共校验器的核心方法是Jquery.bind()
Vue3 中所提供组合 API、ref、reactive、provide、inject几大特性,可以支持完成全局状态管理能力,Vuex 是为 Vue 单独提供的状态管理插件,相对比较笨重,如果项目简单可以尝试替代
绝大多数网站都会有个顶部导航,对于手机端而言为了便于访问导航常常会做固顶操作,通过CSS样式配合Jquery的scroll()方法或原生JS监听滑动事件方法,可以轻松实现下滑隐藏,上滑显示的效果