pc端自适应布局vw

2024-11-02

css3自适应布局单位vw,vh详解

视口单位(Viewport units) 什么是视口? 在桌面端,视口指的是在桌面端,指的是浏览器的可视区域:而在移动端,它涉及3个视口:Layout Viewport(布局视口),Visual Viewport(视觉视口),Ideal Viewport(理想视口). 视口单位中的“视口”,桌面端指的是浏览器的可视区域:移动端指的就是Viewport中的Layout Viewport, “视区”所指为浏览器内部的可视区域大小,即window.innerWidth/window.innerHeig

PC端自适应布局

截止目前,国内绝大多数内容为主的网站(知乎,果壳,V2EX,网易新闻等)均使用内容区定宽布局,大多数电商网站(网易考拉,京东,聚美优品)也使用了内容区定宽的布局,也有些网站使用了自适应布局: 天猫内容区采用媒体查询+定宽,在达到某个断点之后更改内容区的宽度,并把某个内容显示/隐藏. 注意热门市场这里,虽然每一个方块的宽度是随着断点变化的,但是左上角的标签和里面长方形的白色区域在所有的屏幕下都是定宽度的,但是也可以完美的适应不同的屏幕: 淘宝内容区也是采用了媒体查询+定宽: 达到某个节点之后

处理移动端自适应布局的方法- calc()与vw

在处理移动端自适应布局时,目前前端最流行的方法应该就是使用媒体查询,来设置HTML的字体大小,然后用rem为单位对Dom的宽高进行设置,这个方法的优势在于兼容性方面很好,劣势则在于当前市场上不同的机型太多,尺寸种类比较杂,所以要想做到所以尺寸机型都能适应,工作量相对比较大.目前也有人会选择用百分比进行布局,这个布局方法在仅仅处理元素的宽高上面非常好用,但是当js中要对dom元素的尺寸进行设置时,百分比的局限性就出来了,还有就是dom元素的font-size没办法用页面宽度百分比对他进行大小设置,

第 31 章项目实战-PC 端固定布局[3]

学习要点: 1.搜索区 2.插入大图 3.搜索框主讲教师:李炎恢本章主要开始使用学习用 HTML5 和 CSS3 来构建 Web 页面,第一个项目采用 PC 端固定布局来实现. 一．搜索区本节课,我们接着 header 头部往下,来设计一块搜索区.这个区域,可以是广告大图,也可以是用户注册,也可以是一个搜索条,都是一个大幅背景,内嵌一个表单.具体造型如下: 从表面上来分析,就是插入一张背景大图,然后居中一个搜索条.但是,我们要求最小在 1280 分辨率.最大在 1920 分辨率能保持最佳的

第 31 章项目实战-PC 端固定布局[5]

学习要点: 1.底部区域 2.说明区域 3.版权及证件区主讲教师:李炎恢本章主要开始使用学习用 HTML5 和 CSS3 来构建 Web 页面,第一个项目采用 PC 端固定布局来实现. 一．底部区域本节课,我们将探讨一下首页中最底部的区域.这部分区域由两个部分组成,一个是说明内容,有:合作伙伴.旅游 FAQ 和联系方式,还有一个就是版权声明及各种手续证件编号. //底部区域父元素 <footer id="footer"> ... </footer> //底

第 31 章项目实战-PC 端固定布局[4]

学习要点: 1.热门旅游区 2.标题介绍区 3.旅游项目区主讲教师:李炎恢本章主要开始使用学习用 HTML5 和 CSS3 来构建 Web 页面,第一个项目采用 PC 端固定布局来实现. 一．热门旅游区本节课,我们将探讨一下首页最核心的部分,旅游区.这块内容由两个部分组成,一个是大标题,表示热门旅游区域.其次就是旅游项目的图片展示区域.具体如下: //热门旅游区父元素 <div id="tour"> ... </div> //旅游父元素 #tour { w

第 31 章项目实战-PC端固定布局[2]

学习要点: 1.大纲算法 2.section和div 3.结构分析主讲教师:李炎恢本章主要开始使用学习用HTML5和CSS3来构建Web页面,第一个项目采用PC端固定布局来实现. 一．大纲算法在HTML5中有一个很重要的概念,叫做HTML5大纲算法(HTML5Outliner),它的用途是为用户提供一份页面的信息结构目录.比如我们经常使用的手册就是一个非常好的大纲结构: 合理的使用HTML5元素标签,可以生成一个非常清晰的文档大纲,我们可以通过各种工具去查看当前页面,比如谷歌和火狐

第 31 章项目实战-PC端固定布局[1]

学习要点: 1.准备工作 2.创建项目 3.网站结构 4.CSS选择器 5.完成导航主讲教师:李炎恢本章主要开始使用学习用HTML5和CSS3来构建Web页面,第一个项目采用PC端固定布局来实现. 一．准备工作 1.为了达到最低效果,第一个项目将采用1440x900的分辨率录制:因为,1024根本无法容纳最低宽度的页面:页面采用1280的最低宽度设计,去掉滚动条为1263像素. 2.第一个项目是PC端的固定布局,会采用像素(px)单位. 3.项目素材图片,是课外独立设计好的,课程不会去设计

使用rem配置PC端自适应大屏

效果如下使得大屏不论在什么宽高比例依然能展示全部数据安装 npm install -S postcss-pxtorem rem配置思路原先的rem函数是能解决大部分的问题的,如果展示不全,也可以用滚动条. 但是大屏展示又不能使用滚动条,又必须展示全部的内容,这个时候就需要改变原来的计算方式,需要根据屏幕的实际高度来计算对应的屏幕宽度 1. 配置rem.js文件 rem.js可以放在src文件夹下,我是放在src下的utils文件夹中初始的rem配置 // 设置 rem 函数 functi

pc端常见布局样式总结（针对常见的）

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> /* 宽度适配 */ html, body { width: 100%; overflow-x: hidden;/* 外层盒子设置最小宽度的话看不到横向滚动条 */ } /*1. pc端适配的需求:目

pc端自适应方案

一.常见处理方式定宽电商类.内容为主的网站几乎采用这种方式 1.网易考拉.京东(1190px) 2.知乎(1000px),果壳(1000px),网易新闻(1200px) 媒体查询+定宽图片类.简单布局.在达到某个断点之后更改内容区的宽度,并把某个内容显示/隐藏 1.花瓣网 @media screen and (min-width: 1529px)版心为1500px @media screen and (min-width: 1276px) and (max-width: 1528px)版心

电脑分辨率与pc端页面布局

在电脑设置中选择:控制面板->外观和个性化->显示可以设置页面的显示比例,原因是在1920*1080的分辨率下页面的图标就会变得比较小,方便用户看,这个功能就是把页面内容变大(默认是中等展示就是125%倍)就是说代码中100px,会有125px的效果,这也就是为什么,在页面中写一个1536px宽的块状元素,会占满宽为1920像素的整个屏幕.设计稿主体内容的宽度尽量小于1300px,过大了就放不下从而出现滚动条,同时居中自适应展示.

移动端自适应布局 rem方案

1.viewport.js (function(window, document) { // 给hotcss开辟个命名空间,别问我为什么,我要给你准备你会用到的方法,免得用到的时候还要自己写. const hotcss = {} ;(function() { // 根据devicePixelRatio自定计算scale // 可以有效解决移动端1px这个世纪难题. let viewportEl = document.querySelector("meta[name=\"viewport

pc端常见布局---垂直居中布局单元素不定高

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>常见元素布局</title> <style type="text/css"> /* 一.垂直居中布局 */ /* 1.单个元素垂直居中高度不固定*/ .content { position: relative; height: 100px; background:

pc端常见布局---垂直居中布局单元素定高

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>常见元素布局</title> <style type="text/css"> /* 一.垂直居中布局 */ /* 1.单个元素垂直居中高度固定缺点:用到定位,脱离文档流*/ .content { position: relative; height: 100px

pc端常见布局---水平居中布局单元素定宽

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>常见元素布局</title> <style type="text/css"> /* 一.水平居中布局 */ /* 1.单个元素水平居中宽度固定最常用*/ .box { width: 400px; margin: 0 auto; background: #0080

pc端常见布局---水平居中布局单元素不定宽度

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>常见元素布局</title> <style type="text/css"> /* 一.水平居中布局 */ /* 1.单个元素水平居中宽度不固定缺点:需要涉及到父类的样式*/ .content { text-align: center; } .box { dis

flexible.js结合rem实现移动端自适应布局

1. 配置开发工具(sublime)插件 https://github.com/flashlizi/cssrem 注意: 只有在‘.css’后缀文件才能使用此插件功能 2. 在html结构head里引入flexible.js https://github.com/amfe/lib-flexible/blob/master/src/flexible.js

在前端眼中pc端和移动的开发区别

按照昨天所说,本包子今天将总结在前端开发中,pc端和移动端的区别,整理完这些区别,本包子将开始整理pc端的布局,会写实际的代码了,还是那句话,希望文章中有什么不足的地方,大家能多多指正,大家一起进步,成为一个优秀的前端 ~~~ > o < ~~~ PC端和移动端布局的区别 1.pc端没有触摸的各种事件,移动端有:移动端没有鼠标移入移出事件,但是pc端有 2.Pc端最常用的布局是固定宽度为980px(也有960px,1000px,1200px):而在移动端,因为有很多网页是可以横屏看也可以竖屏看

css3自适应布局单位vw,vh

css3自适应布局单位vw,vh 一.总结一句话总结: vw和vh都是视图单位,分别为视图宽高的1% 1.vh/vw与%区别? %是相对于父元素,vh和vw是相对于视图高宽 % 百分比,相对长度单位,相对于父元素的百分比值vh和vw相对于视口的高度和宽度二.css3自适应布局单位vw,vh你知道多少? 转自或参考:css3自适应布局单位vw,vh你知道多少?https://www.cnblogs.com/luxiaoxing/p/7544375.html 视口单位(Viewport unit

如何解决PC端和移动端自适应问题？

做网页时,我们通常需要考虑到不同电脑屏幕尺寸,以及不同手机屏幕大小等问题,解决样式发生改变的情况,那么如何解决呢?现在主要是采用自适应来解决高度,宽度的,以及图片自适应问题,下面就PC端和移动端来总结一下,通常进行自适应高度和宽度,图片时,一般与页面的布局存在关系. 1.最小尺寸分辨率1024*768(传统17寸显示器),则可以采用940px.960px.或者常用的980px作为最小宽度 2.1024*768之后稍大的分辨率就是1280*768了,则可以采用1200px或者1220px作为稍大的

pc端自适应布局vw

热门专题