页面布局

响应式布局浅析

由 蓝咒 提交于 2020-01-04 22:03:29
所谓响应式布局，就是页面会根据当前运行的设备的大小自行进行调整，实现方案主要有以下三种： 1）隐藏 例如在 PC 端的一些友情链接或者不重要的内容在移动端可以选择隐藏起来。 2）换行 在 PC 端显示一行的内容，由于移动端设备宽度比较小，所以可以选择显示为几行。 3）自适应空间 例如，左边元素给定一个具体的值，右边元素的宽度令其根据不同的设备宽度自行调整。 具体的实现方法主要有以下几种： 1）rem rem 是一个相对单位，一般 1rem = html设置的 font-size 的值。 关于 rem 的详细介绍可以参考 移动 web 开发适配秘籍 Rem 这个免费课程。 通过设置不同设备 html 的 font-size 改变 rem 的值，令 1rem 单位的值随着设备的增大而增大。 2）viewport 设置 <meta name="viewport" content="width=device-width, initial-scale=1.0" > ，关于这个下面会介绍。 3）media query 判断当前是什么设备，然后根据不同的设备设置不同的样式。 接下来先说一下 viewport 这个 meta 标签。 <meta name="viewport" content="width=device-width, initial-scale=1.0" >

H5|web移动前端自适应适配布局解决方案

由 半世苍凉 提交于 2020-01-03 14:31:04
方案： 固定一个某些宽度，使用一个模式，加上少许的媒体查询方案 使用flexbox解决方案 使用百分比加媒体查询 使用 rem 1. 简单问题简单解决 我觉得有些 web app并一定很复杂，比如拉勾网，你看看它的页面在iphone4,iphone6,ipad下的样子就知道了： 它的页面有一个特点，就是： 顶部与底部的bar不管分辨率怎么变，它的高度和位置都不变 中间每条招聘信息不管分辨率怎么变，招聘公司的图标等信息都位于条目的左边，薪资都位于右边 这种app是一种典型的弹性布局：关键元素高宽和位置都不变，只有容器元素在做伸缩变换。对于这类app，记住一个开发原则就好：文字流式，控件弹性，图片等比缩放。以图描述： 这个规则是一套基本的适配规则，对于这种简单app来说已经足够，同时它也是后面要说的rem布局的基础。另外对于拉勾这种app可能需要额外媒介查询对布局进行调整的就是小屏幕设备。举例来说，因为现在很多设计稿是根据iphone6的尺寸来的，而iphon6设备宽的逻辑的像素是375px，而iphone4的逻辑像素是320个像素，所以如果你根据设计稿做出来的东西，在iphone4里面可能显示不下，比如说拉钩网底部那个下载框，你对比看下就知道了，这是4： 这是6： · 6下面两边的间距比4多很多，说明拉勾对4肯定是做过适配的，从 代码 也可以证实这一点：

Razor引擎学习：RenderBody，RenderPage和RenderSection

由 房东的猫 提交于 2020-01-02 01:58:28
ASP.NET MVC 3 已经正式发布了，现在估计许多人都在拼命学，我也不能例外，刚刚看到了一篇文章，介绍了三个非常有用的方法：RenderBody，RenderPage和RenderSection，现在自己再总结下。 1. RenderBody 在Razor引擎中没有了“母版页”，取而代之的是叫做“布局”的页面（_Layout.cshtml）放在了共享视图文件夹中。在这个页面中，会看到 标签里有这样一条语句： @RenderBody() 其实它的作用和母版页中的服务器控件类似，当创建基于此布局页面的视图时，视图的内容会和布局页面合并，而新创建视图的内容会通过布局页面的@RenderBody()方法呈现在标签之间。 这个方法不需要参数，而且只能出现一次。 2. RenderPage 从名称可以猜出来这个方法是要呈现一个页面。比如网页中固定的头部可以单独放在一个共享的视图文件中，然后在布局页面中通过这个方法调用，用法如下： @RenderPage(“~/Views/Shared/_Header.cshtml”) @RenderBody() 代码简洁直观，另外似乎带下划线的视图文件有特殊含义，以后再研究吧。 3. RenderSection 布局页面还有节（Section）的概念，也就是说，如果某个视图模板中定义了一个节，那么可以把它单独呈现出来，用法如下： @RenderPage(

Razor引擎学习：RenderBody，RenderPage和RenderSection

由 可紊 提交于 2020-01-02 01:58:10
ASP.NET MVC 3 已经正式发布一段时间了，现在估计许多人都在拼命学，我也不能例外，刚刚看到了一篇文章，介绍了三个非常有用的方法：RenderBody，RenderPage和RenderSection，现在自己再总结下。 1. RenderBody 在Razor引擎中没有了“母版页”，取而代之的是叫做“布局”的页面（_Layout.cshtml）放在了共享视图文件夹中。在这个页面中，会看到标签里有这样一条语句： @RenderBody() 其实它的作用和母版页中的服务器控件类似，当创建基于此布局页面的视图时，视图的内容会和布局页面合并，而新创建视图的内容会通过布局页面的@RenderBody()方法呈现在标签之间。 这个方法不需要参数，而且只能出现一次。 2. RenderPage 从名称可以猜出来这个方法是要呈现一个页面。比如网页中固定的头部可以单独放在一个共享的视图文件中，然后在布局页面中通过这个方法调用，用法如下： @RenderPage(“~/Views/Shared/_Header.cshtml”)@RenderBody() 代码简洁直观，另外似乎带下划线的视图文件有特殊含义，以后再研究吧。 3. RenderSection 布局页面还有节（Section）的概念，也就是说，如果某个视图模板中定义了一个节，那么可以把它单独呈现出来，用法如下：

Razor引擎学习：RenderBody，RenderPage和RenderSection

由 痴心易碎 提交于 2020-01-02 01:57:39
ASP .NET MVC 3 已经正式发布了，现在估计许多人都在拼命学，我也不能例外，刚刚看到了一篇文章，介绍了三个非常有用的方法：RenderBody，RenderPage和RenderSection，现在自己再总结下。 1. RenderBody 在Razor引擎中没有了“母版页”，取而代之的是叫做“布局”的页面（_Layout.cshtml）放在了共享视图文件夹中。在这个页面中，会看到标签里有这样一条语句： @RenderBody() 其实它的作用和母版页中的服务器控件类似，当创建基于此布局页面的视图时，视图的内容会和布局页面合并，而新创建视图的内容会通过布局页面的@RenderBody()方法呈现在标签之间。 这个方法不需要参数，而且只能出现一次。 2. RenderPage 从名称可以猜出来这个方法是要呈现一个页面。比如网页中固定的头部可以单独放在一个共享的视图文件中，然后在布局页面中通过这个方法调用，用法如下： @RenderPage(“~/Views/Shared/_Header.cshtml”) @RenderBody() 代码简洁直观，另外似乎带下划线的视图文件有特殊含义，以后再研究吧。 3. RenderSection 布局页面还有节（Section）的概念，也就是说，如果某个视图模板中定义了一个节，那么可以把它单独呈现出来，用法如下： @RenderPage(

Razor引擎学习：RenderBody，RenderPage和RenderSection

由 别说谁变了你拦得住时间么 提交于 2020-01-02 01:57:08
ASP.NET MVC 3 已经正式发布了，现在估计许多人都在拼命学，我也不能例外，刚刚看到了一篇文章，介绍了三个非常有用的方法：RenderBody，RenderPage和RenderSection，现在自己再总结下。 1. RenderBody 在Razor引擎中没有了“母版页”，取而代之的是叫做“布局”的页面（_Layout.cshtml）放在了共享视图文件夹中。在这个页面中，会看到<body>标签里有这样一条语句： @RenderBody() 其实它的作用和母版页中的<contentplaceholder>服务器控件类似，当创建基于此布局页面的视图时，视图的内容会和布局页面合并，而新创建视图的内容会通过布局页面的@RenderBody()方法呈现在<body>标签之间。 这个方法不需要参数，而且只能出现一次。 2. RenderPage 从名称可以猜出来这个方法是要呈现一个页面。比如网页中固定的头部可以单独放在一个共享的视图文件中，然后在布局页面中通过这个方法调用，用法如下： @RenderPage(“~/Views/Shared/_Header.cshtml”) @RenderBody() 代码简洁直观，另外似乎带下划线的视图文件有特殊含义，以后再研究吧。 3. RenderSection 布局页面还有节（Section）的概念，也就是说，如果某个视图模板中定义了一个节

Razor引擎学习：RenderBody，RenderPage和RenderSection

由 你离开我真会死。 提交于 2020-01-02 01:56:41
RenderBody，RenderPage和RenderSection 1. RenderBody 在Razor引擎中没有了“母版页”，取而代之的是叫做“布局”的页面（_Layout.cshtml）放在了共享视图文件夹中。在这个页面中，会看到<body>标签里有这样一条语句： @RenderBody() 其实它的作用和母版页中的<contentplaceholder>服务器控件类似，当创建基于此布局页面的视图时，视图的内容会和布局页面合并，而新创建视图的内容会通过布局页面的@RenderBody()方法呈现在<body>标签之间。 这个方法不需要参数，而且只能出现一次。 2. RenderPage 从名称可以猜出来这个方法是要呈现一个页面。比如网页中固定的头部可以单独放在一个共享的视图文件中，然后在布局页面中通过这个方法调用，用法如下： @RenderPage(“~/Views/Shared/_Header.cshtml”) @RenderBody() 代码简洁直观，另外似乎带下划线的视图文件有特殊含义，以后再研究吧。 3. RenderSection 布局页面还有节（Section）的概念，也就是说，如果某个视图模板中定义了一个节，那么可以把它单独呈现出来，用法如下： @RenderPage(“~/Views/Shared/_Header.cshtml”) @RenderBody

@RenderBody、@RenderSection、@RenderPage、Html.RenderPartial、Html.RenderAction的作用和区别

由 妖精的绣舞 提交于 2020-01-02 01:53:28
1. RenderBody 在Razor引擎中没有了“母版页”，取而代之的是叫做“布局”的页面（_Layout.cshtml）放在了共享视图文件夹中。在这个页面中，会看到标签里有这样一条语句： @RenderBody() 其实它的作用和母版页中的服务器控件类似，当创建基于此布局页面的视图时，视图的内容会和布局页面合并，而新创建视图的内容会通过布局页面的@RenderBody()方法呈现在标签之间。 这个方法不需要参数，而且只能出现一次。 2. RenderPage 从名称可以猜出来这个方法是要呈现一个页面。比如网页中固定的头部可以单独放在一个共享的视图文件中，然后在布局页面中通过这个方法调用，用法如下： @RenderPage(“~/Views/Shared/_Header.cshtml”) 带参数 @RenderPage(“~/Views/Shared/_Header.cshtml”,new{parm="my",parm2="you") 调用页面获取参数： (刚学习MVC，不懂这句话是什么意思：不是调用页面这样调用，参数要给谁使用呢？) //获取 RenderPage() 传递过来的参数 @PageData["param"] 3. RenderSection 布局页面还有节（Section）的概念，也就是说，如果某个视图中定义了一个节，那么可以把它单独呈现出来，用法如下： /

@RenderBody、@RenderSection、@RenderPage、Html.RenderPartial、Html.RenderAction的作用和区别

由 徘徊边缘 提交于 2020-01-02 01:52:53
1. RenderBody 在Razor引擎中没有了“母版页”，取而代之的是叫做“布局”的页面（_Layout.cshtml）放在了共享视图文件夹中。在这个页面中，会看到标签里有这样一条语句： @RenderBody() 其实它的作用和母版页中的服务器控件类似，当创建基于此布局页面的视图时，视图的内容会和布局页面合并，而新创建视图的内容会通过布局页面的@RenderBody()方法呈现在标签之间。 这个方法不需要参数，而且只能出现一次。 2. RenderPage 从名称可以猜出来这个方法是要呈现一个页面。比如网页中固定的头部可以单独放在一个共享的视图文件中，然后在布局页面中通过这个方法调用，用法如下： @RenderPage(“~/Views/Shared/_Header.cshtml”) 带参数 @RenderPage(“~/Views/Shared/_Header.cshtml”,new{parm="my",parm2="you") 调用页面获取参数： //获取 RenderPage() 传递过来的参数 @PageData["param"] 3. RenderSection 布局页面还有节（Section）的概念，也就是说，如果某个视图模板中定义了一个节，那么可以把它单独呈现出来，用法如下： @RenderPage(“~/Views/Shared/_Header.cshtml

网页自适应的实现及方案研究，新手必学的网页程序开发技巧

由 我是研究僧i 提交于 2020-01-01 00:40:27
随着手机的普及程度越来越高，网页开发的需求兼容性就要更广。你的网页页面设计为自适应是非常必要的，那么对于菜手们来说，又是需要来学习一下的 ，这不这就收集整理了一些资料，普及一下， 1.关于自适应布局的一些基本概念 px (pixel)：像素，是屏幕上显示数据的最基本的点，表示相对大小。不同分辨率下相同长度的px元素显示会不一样，比如同样是14px大小的字，在1366✖768显示屏下会显示的小，在1024×768尺寸的显示器下会相对大点。也称为物理像素（设备像素），是分辨率的尺寸单位。 pt 是一种固定长度的度量单位，能够使用测量设备测得的长度，等于1/72英寸。 css像素 ，在不同屏幕上，css像素呈现的物理尺寸一致，但css像素对应的物理像素具数不同。标准的显示密度下，1个css像素对应一个物理像素，缩放时，1个css像素对应的物理像素会减增。css像素称为设备独立像素(device independent pixels: DIPs) PPI (pixel per inch)，像素密度，每英寸所拥有的像素数。值越高，屏幕越细腻。 DPI (dot per inch)，打印设备每英寸印刷出来的点有多少个，值越高，图片越细腻。 DPR 设备物理像素和设备独立像素比，即，是指在理想布局宽度，使用多少个物理像素来渲染一个设备独立像素。js中通过 window
订阅 页面布局